H5W3
当前位置:H5W3 > CSS3 > 正文

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%…

本文地址:H5W3 » flex布局如何一列多行?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址