带有ul列表的Flexbox

Question

我想使用flexbox与我的列表构建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%; } 

不幸的是，它对齐四个我li成一排。

Answer 1

将柔性盒体排，并给予项目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

你可能需要设置li和化妆河畔的弯曲特性如果需要，你可以告诉父母包装。

* { 
 
    -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 
}