css – 带有ul列表的Flexbox

我想使用flexbox与我的列表构建2×2网格.我的代码如下： <ul class="cont"> <li>text</li> <li>text</li> <li>text

... . . 我想使用flexbox与我的列表构建2×2网格.我的代码如下：

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

CSS：

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

不幸的是,它连续排列了我的四个.

.

解决方法

. 包裹柔性盒子行并给出柔性基础：50％或宽度：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>

. . .. ...