长包装的弹性项目将其他人推倒[重复]答案

【问题标题】：long wrapped flex item pushing others down [duplicate]长包装的弹性项目将其他人推倒[重复]
【发布时间】：2017-11-16 18:48:07
【问题描述】：

我在一个弹性盒子中有 3 个不同长度的 div。每个 div 的宽度为 47%。我正在使用 flex wrap 将它们包裹起来。最长的 div 排在第二位，并将第三个 div 一直向下推到它的结束位置。反正有没有让第三个 div 出现在第一个 div 之下。

CodePen

HTML

<div class="flex-box">
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

CSS

.flex-box{
  display: flex;
  background: black;
  flex-wrap: wrap;
  width: 500px;
  justify-content: space-between;
  align-items: flex-start;

}
.flex-item{
  width: 47%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

【问题讨论】：

用.flex-item{width: 47%;} 进行实验或添加.flex-item{margin-right: 3%;}。

标签： html css flexbox

【解决方案1】：

要使用单个容器垂直和水平排列项目，请使用 grid 而不是 flex - 这就是它的用途！

这是 grid 解决方案的 CSS，HTML 未更改：

.flex-box{
  display: grid;
  grid-template-columns: 47% 47%;
  grid-template-rows: 78px auto;
  background: black;
  width: 500px;
  justify-content: space-between;
  align-items: start;

}
.flex-item{
  width: 100%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

.flex-item:nth-of-type(2) {
  grid-row-start: span 2;
}

您可能希望更改/添加 HTML 中的类以避免摆弄nth-of-type。

【讨论】：

【解决方案2】：

按以下方式重新排列class="flex-item"。

<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div> //Longest div container

然后将flex-direction:column 提供给容器。并且不要忘记将max-height:(Anything less than your container height) 提供给您的容器。

.flex-box {
  display: flex;
  flex-direction: column;
  background: black;
  flex-wrap: wrap;
  width: 500px;
  max-height: 520px;
  justify-content: space-between;
}

.flex-item {
  width: 47%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

<div class="flex-box">
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>

  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

【讨论】：