使用柔性盒对齐一行中的3项

Question

我试图在800 at断点对齐三个div。

我的代码中有两个断点，一切都正常工作，直到达到800 it。在800 on，‘审查者3’结束在它自己的行‘审查者1和2’。

​

  .cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.border {
  padding: 50px;
  font-size: 22px;
}

.center {
  position: relative;
  left: 25%;
}

@media screen and (min-width: 600px) {
  h3 {
    color: blue;
  }
  .cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .border {
    padding: 50px;
    text-align: center;
  }
  .center {
    display: relative;
    left: 0;
  }
  .wrapper {
    display: flex;
    flex-direction: row;
  }
  .card-1,
  .card-2 {
    margin: 15px;
    border: 1px solid black;
    text-align: center;
    width: 50%;
  }
  .card-3 {
    position: relative;
    left: 25%;
    border: 1px solid black;
    margin: 15px;
    width: 50%;
    text-align: center;
  }
  @media screen and (min-width: 800px) {
    h3 {
      color: red;
    }
    .cards {
      display: flex-box;
      flex-direction: row;
    }
    .card-1,
    .card-2,
    .card-3 {
      margin: 30px;
      border: 1px solid black;
      text-align: center;
      width: 30%;
      height: 20%;
    }
  }

<div class="cards">
  <div class="wrapper">
    <div class="card-1">
      <h3>Reviewer 1</h3>
      <img class="center" src="https://via.placeholder.com/250" alt="placeholder">
      <p class="border">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
    </div>

    <div class="card-2">
      <h3>Reviewer 2</h3>
      <img class="center " src="https://via.placeholder.com/250" alt="placeholder">
      <p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
    </div>
  </div>
  <div class="card-3">
    <h3>Reviewer 3</h3>
    <img class="center" src="https://via.placeholder.com/250" alt="placeholder">
    <p class="border" id="b3">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
  </div>
</div>

​

Answer 1

您的问题是HTML问题。第三个框位于.wrapper元素之外。

另外，使用flex-basis或min-width代替width。最后，您确定要使用left: 30%吗？

更新

因为.wrapper是.card-1、.card-2和.card-3 (不是.cards). >D23)，所以当屏幕点击@media (min-width: 800px)时，600

• 会覆盖

• 语句以说明边框+裕度

• 添加flex-wrap: wrap到.wrapper (不是.cards)。

​

.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.border {
  padding: 50px;
  font-size: 22px;
}

img {
  max-width: 100%;
  height: auto;
}

.wrapper {
  /* This works for wrapper's children, namely card-1, card-2, card-3 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.card-1,
.card-2,
.card-3 {
  border: 1px solid black;
  text-align: center;
  flex-basis: 100%;
}


@media screen and (min-width: 600px) {
  h3 {
    color: blue;
  }

  .card-1,
  .card-2 {
    margin: 15px;
    flex-basis: calc(50% - 32px);
  }

  .card-3 {
    position: relative;
    margin: 15px;
    flex-basis: 100%;
  }
}

@media screen and (min-width: 800px) {
  h3 {
    color: red;
  }

  .card-1,
  .card-2,
  .card-3 {
    margin: 30px;
    flex-basis: calc(33.33% - 62px);
    height: 20%;
  }
}

<div class="cards">
  <div class="wrapper">
    <div class="card-1">
      <h3>Reviewer 1</h3>
      <img class="center" src="https://via.placeholder.com/250" alt="placeholder">
      <p class="border">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
    </div>

    <div class="card-2">
      <h3>Reviewer 2</h3>
      <img class="center " src="https://via.placeholder.com/250" alt="placeholder">
      <p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
    </div>
    <div class="card-3">
      <h3>Reviewer 3</h3>
      <img class="center" src="https://via.placeholder.com/250" alt="placeholder">
      <p class="border" id="b3">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
    </div>
  </div>
</div>

​