css3 flex對齊時，其中一個元素是其他元素的2倍

我有以下代碼：我使用彈性框我所做的是刪除第三行和第二行之間不必要的空格（八分之二的元素高出2倍那個其他元素，eights元素應該在頂部有第4個元素，左邊有第7個元素和第11個元素，底部有15個元素）。css3 flex對齊時，其中一個元素是其他元素的2倍

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

來源

2016-09-27 Dominik Kajzar

Flexbox的不能被用作 '網格系統' ...我認爲那是wh在你正在嘗試...... – kukkuz

我過度工作，像http://codepen.io/dodekx/pen/NRwAEy（添加div包裝） –

你應該改變高度到最小高度

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

來源

2016-09-27 09:55:04 DoreVN

但在這種情況下，第5,6,7和第8元素具有相同的高度，但只有8個元素應該有2X高度 –

css3 flex對齊時，其中一個元素是其他元素的2倍

回答

相關問題