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 再设置一个高度,就会自动换行了。
###这样的布局就不应该用你这样的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%