'Using "justify-content: center" despite using flex-end on parent flex container

I am trying to achieve something like this:

enter image description here

As you can see, the "TITLE" should be centered, whilst the little boxes in the top right corner should be set to flex-end.

After having tried it myself, I wasn't able to achieve what I desired, because the title is also set to flex-end.

Is there any way to do this using flex, and if not, what else could I do to achieve this, whilst also making it somewhat responsive.

Here is a snippet of my HTML and CSS:

#boxContainer {
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    align-items: center;
    height: 120vh;
    width: 100%;
    background-color: gray;
    padding-top: 20vh;
}

.box { /* parent container */
    display: flex;
    position: static;
    justify-content: flex-end;
}

.boxImg {
  max-width: 20vw;
  height: 70vh;
}

.boxTitle {
    position: absolute;
    text-align: center;
    align-self: center;
    font-size: 2.5em;
    font-weight: bold;
    color: white;
}
 
.topRightBox {
    max-width: 2.5vw;
    height: 5vh;
    position: absolute;
    align-self: flex-start;
    margin: 0.5% 0.5% 0 0;
}
<div id="boxContainer">
  <div class="box">
    <img class="boxImg" src ="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
    <div class="boxTitle">TITLE</div>
    <img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
  </div>
  <div class="box">
    <img class="boxImg" src ="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
    <div class="boxTitle">TITLE</div>
    <img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
  </div>
  <div class="box">
    <img class="boxImg" src ="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
    <div class="boxTitle">TITLE</div>
    <img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
  </div>
  <div class="box">
    <img class="boxImg" src ="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
    <div class="boxTitle">TITLE</div>
    <img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
  </div>
</div>

Codepen

Thanks in advance.

htmlcssflexboxcss-position


Solution 1:[1]

Im not sure how to do with with flexbox, but using this code for the .topRightBox achieves the same thing:

.box { /* parent container */
    display: flex;
    position: relative;
    just
.topRightBox {
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    position: absolute;
    top: 5px;
    right: 5px;
}

Solution 2:[2]

You can use top and right properties for topRightBox. I specified codes that were added. also, I deleted some codes:

#boxContainer {
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  align-items: center;
  height: 120vh;
  width: 100%;
  background-color: gray;
  padding-top: 20vh;
}

.box {
  /* parent container */
  flex-basis: 20%;/*here*/
  display: flex;
  justify-content: center;/*here*/
  position: relative;/*here*/
}

.boxImg {
  width: 100%;/*here*/
  height: 70vh;
}

.boxTitle {
  position: absolute;
  align-self: center;
  font-size: 2.5em;
  font-weight: bold;
  color: white;
}

.topRightBox {
  position: absolute;
  top: 5px;  /*here*/
  right: 5px;  /*here*/
  max-width: 2.5vw;
  height: 5vh;
}
<div id="boxContainer">
  <div class="box">
    <img class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
    <div class="boxTitle">TITLE</div>
    <img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
  </div>
  <div class="box">
    <img class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
    <div class="boxTitle">TITLE</div>
    <img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
  </div>
  <div class="box">
    <img class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
    <div class="boxTitle">TITLE</div>
    <img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
  </div>
  <div class="box">
    <img class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
    <div class="boxTitle">TITLE</div>
    <img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Arman Ebrahimi

Related Questions