フレキシボックスと包まアイテムのアラインメント

Question

Iは、ラップされたアイテムとフレキシボックスある：私は正しいと5、6、7、および8たい

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    border: 1px solid silver; 
 
    -ms-box-orient: horizontal; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 520px; 
 
    height: 520px; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-item { 
 
    background: gold; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    line-height: 100px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
}

<ul class="flex-container wrap"> 
 
    <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">8</li> 
 
</ul>

https://jsfiddle.net/0v54s2Lz/1/

を1、2、3、および4の下にあります。しかし、ギャップがあります。 Flexboxは、おそらく、 "行"の高さを均等化しようとしています。

Answer 1

あなたは.flex-コンテナに

align-content: flex-start; 

を追加する必要があります。

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    border: 1px solid silver; 
 
    -ms-box-orient: horizontal; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 520px; 
 
    height: 520px; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    align-content: flex-start; 
 
} 
 

 
.flex-item { 
 
    background: gold; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    
 
    line-height: 100px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
}

<ul class="flex-container wrap"> 
 
    <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">8</li> 
 
</ul>

https://jsfiddle.net/7LeL9mcd/

Answer 2

ここで、.flex-containerからheight: 520px;を削除し、更新されfiddle