使用 "justify-content: center" 尽管在父 flex 容器上使用 flex-end

Question

我正在努力实现这样的目标：

如您所见，“TITLE”应居中，而右上角的小方框应设置为 flex-end。

自己试了一下，还是没有达到我想要的效果，因为title也设置为flex-end。

有没有什么方法可以使用 flex 做到这一点，如果没有，我还能做些什么来实现这一点，同时也让它有一定的响应能力。

这是我的 HTML 和 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

提前致谢。

Answer 1

您可以使用此代码。对于响应式，将您的样式放在此块中： @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>

Answer 2

我不确定如何使用 flexbox，但是将此代码用于 .topRightBox 可以实现相同的目的：

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

Answer 3

您可以为 topRightBox 使用 top 和 right 属性。我指定了添加的代码。另外，我删除了一些代码：

#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>

使用 "justify-content: center" 尽管在父 flex 容器上使用 flex-end

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

html

css

css-position

flexbox