CSS | Flex

Flex主要的用法在阮一峰老师的博客中写的非常清楚：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

这里重点记录一下flex-grow、flex-shrink、flex-basis三个item属性的用法

在很多布局中我们会看到 flex:1 或者flex:auto 这样的写法，其实flex是这三个属性的简写：

flex : flex-grow | flex-shrink | flex-basis

flex-grow:

1. 若取0，则代表item即使主轴上有剩余空间，也不会增大；
2. 若取1，则代表item会获取主轴上剩余空间的一份；
3. 若取大于1的整数，而其他item都为1，则该item获取更多的剩余空间

flex-shrink: 类似grow，取0 | 1 定义item是否会因为主轴空间不足而变小

flex-basis：(以下都是按flex-direction:row时的说法，如果主轴是竖轴，flex-basis指的是高度)

1. 若取auto，若item由设置宽度，就为宽度，否则表示item的大小被内容撑开;
2. 取百分比(相对父元素)或固定宽度;
3. 若取0，表示大小由shrink和grow决定以及主轴剩余空间决定

1. flex:1 => 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0% 
2. flex: auto => 1 1 auto
3. flex : none => 0 0 auto

简单的例子：

<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
</div>

.container{
        height: 500px;
        display: flex;

        /*两端对齐 间距一致*/
        justify-content: space-between;

        /*交叉轴居中*/
        align-items: center;
    }
    .container>div{
        margin: 0 20px;
        height: 300px;
    }
    .box1{

        flex: 0 0 50%;
        background-color: blue;

    }
    .box2{
        flex: 0 0 25%;
        background-color: green;
    }
    .box3{
        flex: 0 1 30%;
        background-color: pink;
    }

可以看到box1不会根据主轴剩余空间增大或缩小，固定占父元素的50%，box2同样固定占父元素的25%

box3如果设置为 0 0 30%，也固定占父元素的30%，那么30+25+50>100%就会出现滚动条，如果给box3设置为0 1 30%, 即会随主轴空间的不足而缩小，即会变成父元素25% - 所有margin的长度。