flex布局如何一列多行?

flex如何布三行一列

<ul class="flex">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

这样的代码如何用CSS3中的flex来布局三行一列呢(还是只能靠float来操作...)?

类似以下这样

即1、2、3横放各占70%,4竖放占30%并浮动到最右边。

 

回答:

flex-wrap: wrap;

flex-direction: column;

给 .flex 再设置一个高度,就会自动换行了。

UL结构是未知高度。再者设置高度后,还要给4加个height:100%...

以上是 flex布局如何一列多行? 的全部内容, 来源链接: www.h5w3.com/122751.html

回到顶部