フレックスボックスアイテムをクリアするには？

Question

最初のアイテムが100％幅、2番目が50％、3番目と4番目が50％幅になるようにフレックスボックスのレイアウトアイテムをクリアする必要があります。

クリアは単純なブロック項目では正常ですが、フレックスレイアウトではこれを行う方法が見つかりません。

https://jsfiddle.net/tzx8qyjt/

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

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

 
.container.block { 
 
    display: block; 
 
} 
 

 
.container.block .item { 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
.half { 
 
    width: 50%; 
 
} 
 

 
.container .item.centered { 
 
    float: none; 
 
    clear: both; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<ul class="container"> 
 
    <li class="item">1</li> 
 
    <li class="item half centered">2 Clear after me</li> 
 
    <li class="item half">3</li> 
 
    <li class="item half">4</li> 
 
</ul> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<ul class="container block"> 
 
    <li class="item">1</li> 
 
    <li class="item half centered">2 Clear after me</li> 
 
    <li class="item half">3</li> 
 
    <li class="item half">4</li> 
 
</ul>

Answer 1

クリア山車がフレックスの項目に同じように動作しませんので、あなたはすべての項目でbox-sizing: border-boxを設定する場所、この、（パディングがセット幅に含まれることになり）のように行うことができますし、その後、あなたの2のために：ND、あなたはそれを新しい行

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

 
.item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 100%; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
} 
 

 
.half { 
 
    width: 50%; 
 
} 
 
.container .item.centered { 
 
    margin: 0 10px; 
 
}

<ul class="container"> 
 
    <li class="item">1</li> 
 
    <li class="item half centered">2 Clear after me</li> 
 
    <li class="item half">3</li> 
 
    <li class="item half">4</li> 
 
</ul>

0に休息を強制する小さなマージンを与えます

Answer 2

フレックスレイアウトの鍵は、flex-wrap: wrapとbox-sizing: border-boxを適切な幅を使用しています。

最初の項目は100％幅になります。それは後続のアイテムを強制的にラインから外します。

第2、第3、第4の項目の幅はそれぞれ50％です。

しかし、それぞれの項目には水平パディングもあります。したがって、アイテム2はアイテム3と4を強制的にオフにします。

項目3と4の場合、ボックスモデルをbox-sizing: content-box（デフォルト）からborder-boxに調整すると、埋め込みが幅計算に含まれ、両方の項目が完全に1行に収まります。

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 

 
li:nth-child(1) { flex: 0 0 100%;} /* flex-grow, flex-shrink, flex-basis */ 
 
li:nth-child(2) { flex: 0 0 50%; } 
 
li:nth-child(3) { flex: 0 0 50%; box-sizing: border-box; } 
 
li:nth-child(4) { flex: 0 0 50%; box-sizing: border-box; } 
 

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

<ul class="container"> 
 
    <li class="item">1</li> 
 
    <li class="item half centered">2 Clear after me</li> 
 
    <li class="item half">3</li> 
 
    <li class="item half">4</li> 
 
</ul>

Answer 3

私はそれがあなたのために働くことを期待します。私はこのコードを使用しています。

.clear { 
     width: 100%; 
     border: none; 
     margin: 0; 
     padding: 0; 
    } 

<ul class="container"> 
    <li class="item">1</li> 
    <li class="item half">2 Clear after me</li> 
    <li class='clear'><li> 
    <li class="item half">3</li> 
    <li class="item half">4</li> 
</ul> 

フローレイアウトで一般的に使用するもの。

.clear { 
    border: 0; 
    clear: both; 
    height: 0; 
}