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%并浮动到最右边。

阅读 4k
2 个回答
flex-wrap: wrap;
flex-direction: column;

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

这样的布局就不应该用你这样的DOM结构

<div class='container'>
    <main>
        <div></div>
        <div></div>
        <div></div>
    </main>
    <aside></aside>
</div>
// stylus
.container
    display flex
    main
        width 70%
    aside
        width 30%
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题