.flex-container
{
    display: -webkit-flex;  /*flex box*/
    display: flex;

    flex-direction: column;    /*纵向排列*/
    -webkit-flex-direction: column;
    
    -webkit-flex-wrap: wrap;    /*换行*/
    flex-wrap: wrap;

    width: 400px;
    height: 250px;
}

参考http://www.w3schools.com/css/css3_flexbox.asp

flex属性对浏览器版本有要求，某些版本需要添加-moz-，-webkit-或者-ms-，再老
的版本会不支持。具体可以看
http://caniuse.com/#search=flex

【 在 Outlook (Microsoft Outlook) 的大作中提到: 】
: 如附件图片所示，在一个div里面，我想添加几个同样的蓝色区块元素，要求是按照
1234
: 的顺序，即按照添加顺序，先向下布局，当超过3个时候，第四个自动移到第一个左
边，
: 以此这样进行下去。求教这种浮动布局怎么写CSS? 谢谢
: ...................
--
修改:radarxc1 FROM 66.162.88.*
FROM 66.162.88.*