css3 Flex 布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。

它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

css3 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

注意：

1.dispaly:flex用在父元素上

2.flex-direction属性决定主轴的方向（即项目的排列方向）。flex-direction: row | row-reverse | column | column-reverse;

3.min/max-width/height 可限制小盒子的宽度和高度范围

如下图：传统的是利用浮动布局，下面我们使用flex布局

    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>

    .box{
            width: 1000px;
            height: 300px;
            margin: 0 auto;
            display: flex;/* 用在父元素上，弹性布局 */
            flex-direction: row;/* 默认row，垂直用column */
        }
        .box div {
            background: rgb(218, 189, 189);
            margin: 1px;
            flex: 1;/* 三个盒子三等分 */
            min-width:100px;
            max-height: 500px;/* 可用于限制小盒子的宽度和高度范围 */
        }
        .box div:last-child {
            flex: 2;/*分成四份，最后一个盒子2份，剩下两个盒子平均剩下两份  */
        }

更多关于Flex 布局的属性可以看菜鸟教程的：Flex 布局语法教程