[分享]css3怎么把ul列变行

CSS3怎么把ul列变行？方法如下：
首先，在HTML中创建ul列表，如下所示：

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul> 

然后在CSS中将ul的display属性设置为flex，并且设置其flex-wrap属性为wrap，如下所示：

ul#list {
    display: flex;
    flex-wrap: wrap;
} 

这样就可以将ul的列排列方式变为行排列方式了。
如果你想将列表项的宽度平均分配，可以将li的flex属性设置为1，如下所示：

ul#list li {
    flex: 1;
} 

这样每个列表项的宽度就会平均分配。
如果你想在行排列方式下，让列表项垂直居中，可以使用align-items属性，如下所示：

ul#list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
} 

这样就可以让列表项在垂直方向上居中了。
最后附上完整的代码：

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
<br>
ul#list {
    display: flex;
    flex-wrap: wrap;
}
<br>
ul#list li {
    flex: 1;
}
<br>
ul#list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
} 

这里是CSS3怎么把ul列变行的方法介绍，希望对你有所帮助。