当一个元素比另一个元素高2倍时，css3 flex对齐[重复]

Question

我有以下代码： 我使用弹性盒子 我尝试做的是删除第三行和第二行之间不必要的空间（八元素是其他元素的 2 倍，八元素应该在顶部有第 4 个元素，在左边有第 7 个和第 11 个元素，在底部有 15 个元素）。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  width:900px;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  flex-direction: row;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-item-double {
  height:400px;
 
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item flex-item-double">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
  <li class="flex-item">11</li>
   <li class="flex-item">12</li>
  <li class="flex-item">13</li>
  <li class="flex-item">14</li>
  <li class="flex-item">15</li>
</ul>

Answer 1

你应该把 height 改为 min-height

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  width:900px;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  flex-direction: row;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  min-height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-item-double {
  min-height:400px;
 
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item flex-item-double">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
  <li class="flex-item">11</li>
   <li class="flex-item">12</li>
  <li class="flex-item">13</li>
  <li class="flex-item">14</li>
  <li class="flex-item">15</li>
</ul>