flex如何布三行一列

Question

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

Answer 1

flex-wrap: wrap;
flex-direction: column;

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

Answer 2

这样的布局就不应该用你这样的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%