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

Question

I am trying to achieve something like this:

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.

Also, see this post for various methods: https://stackoverflow.com/q/38948102/3597276 — Michael Benjamin, Feb 20 '22 at 20:05

Kyanoush · Accepted Answer · 2022-02-20T20:49:04.950

You can use this code. For responsive put your style in this block: @media (max-width: 768px) {}

#boxContainer {
    display: flex;
    flex-direction: row;
    max-width: 1200px;
    margin: 0 auto;
}

.box {
    position: relative;
    width: 23%;
    margin: 1%;
    border: 1px solid #333;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.boxImg {
    width: 100%;
}
.topRightBox {
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    position: absolute;
    top: 5px;
    right: 5px;
}
.boxTitle {
    position: absolute;
    font-size: 2.5em;
    font-weight: bold;
    color: white;
}

@media (max-width: 768px) {
    #boxContainer {
        flex-direction: column;
    }

    .box {
        width: 90%;
        margin: 0 auto 20px;
    }
}

<div id="boxContainer">
    <div class="box">
        <img alt="giraffe" class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg">
        <div class="boxTitle">TITLE</div>
        <img alt="square"
             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">
    </div>
    <div class="box">
        <img alt="giraffe" class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg">
        <div class="boxTitle">TITLE</div>
        <img alt="square"
             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">
    </div>
    <div class="box">
        <img alt="giraffe" class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg">
        <div class="boxTitle">TITLE</div>
        <img alt="square"
             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">
    </div>
    <div class="box">
        <img alt="giraffe" class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg">
        <div class="boxTitle">TITLE</div>
        <img alt="square"
             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">
    </div>
</div>

Eshwar tangirala · Answer 2 · 2022-02-20T20:45:06.223

0

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;
}

edited Feb 20 '22 at 20:45

answered Feb 20 '22 at 20:37

Eshwar tangirala

21
6

score 0 · Answer 3 · answered Feb 20 '22 at 21:42

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>

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

3 Answers3