css3 flex alignment，当其中一个元素比其他元素高2倍时

Question

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

.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

你应该将身高改为 min-height

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;