flex布局的理解

2018-02-11

最近发现flex布局有很多坑，自己对它的理解还不够深入。

flex布局父元素没啥好说的，就是一个justify-content设置水平对齐方式，alighitem设置垂直对齐方式。

对于flex布局的子元素，有三个设定值很关键

flex-basis

术语说是它占据的主轴空间，说人话就是这个子元素拥有的空间，默认拥有的空间当然是它自己大小，有什么用呢，这个属性可以帮助我们进行多级划分。最典型的就是多行布局应用。

    <style>
    .box {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }
    .column {
        border: solid 2px red;
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
        /*控制横向对齐*/
    }
    .item{
        background-color: #08BDEB;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="column">
        <span class="item">1</span>
        <span class="item">2</span>
    </div>
    <div class="column">
        <span class="item">3</span>
        <span class="item">4</span>
    </div>
</div>
</body>

如上把column的主轴设为百分之百就可以对它进行进一步的划分，从而完成多行多列的布局。

flexgrow

这个属性之前一直有误解，之前只知道对它设置一个数值，它就会自动按比例划分，没有深究它的计算原理，其实它指的是对剩余空间的瓜分。也就是说先要父亲的长度减去所有子元素的flexbasis，如果有多，那就按权重分掉。计算公式如下：

剩余后宽度 w = (子元素flex-grow值 /所有子元素flex-grow的总和) 剩余值*

flexshrink

这个属性计算原理是，如果子元素的所有flexbasis加起来比父亲多，那么就要根据自身长度和那个权重进行缩放。计算公式如下

压缩后宽度 w = (子元素flex-basis值 (flex-shrink)/加权值) 溢出值

总结来说，就是flex布局的子元素设置flex属性后它就不会超出父元素，要么放大要么缩小。那如果我们要让元素溢出怎么办呢？应该这样设置：

1	flex:0 0 auto

这样元素就会按照本来的长度单方向布满。

值得一提的是flex属性由于历史原因还有一个相似的box属性，所以要做一个兼容处理

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */ 
display: flex

但最近实践发现box和flex还是有一点区别，就是如果不设置flex属性。box布局如果长度超出不会收缩，而flex布局会进行收缩，也就是说默认的flex-shrink不同。