フレックスボックス（ulリスト付き）

Question

フレックスボックスを使用して2x2グリッドを作成したい次のように私のコードは次のとおりです。

<ul class="cont"> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
</ul> 

CSS：

.cont { display: flex; } 
.cont li { width: 50%; } 

残念ながら、それは4つを整列私li行インチ

Answer 1

あなたはおそらくliとメイクSURのフレックスプロパティを設定する必要が柔軟ボックスの行をラップし、アイテムにflex-basis: 50%またはwidth: 50%

.cont { 
 
    display: flex; 
 
    flex-flow: row wrap; /* Shorthand for flex-direction: row and flex-wrap: wrap */ 
 
} 
 
.cont li { 
 
    flex-basis: 50%; /* or width: 50% */ 
 
}

<ul class="cont"> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
</ul>

Answer 2

flex-wrap: wrapラップすることが許可されていることを確認しましょう。 undefinedがnowrapの場合のデフォルト引数です。

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Answer 3

を与えます必要に応じてラップするよう親に指示します。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.cont { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.cont li { 
 
    flex: 0 0 50%; 
 
    border: 1px solid grey; 
 
    text-align: center; 
 
}

<ul class="cont"> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
</ul>

Answer 4

もう一つの方法は、フレックス方向を使用することです。

.cont { 
    display:flex; 
    flex-direction:column; // or row depending on which way you want it to flow 
}