flex布局

一、概念：开启了flex布局的元素叫flex container;flex container里面的直接子元素叫做flex item.

1.当flex container中的子元素变成了flex item时，具备以下特点：

1. flex item 的布局将受flex container属性的设置来进行控制和布局；

2. flex item 不再严格区分块级元素和行内级元素；

3. flex item默认情况下是包裹内容的，但是可以设置宽高。

2.设置display属性为flex(flex container为block-level盒子)或者inline-flex(flex container为3.inline-level盒子)可以成为flex container

二、属性：

1. flex container上的属性有：

1. flex-direction:row(默认）/row-reverse/column/column-reverse;

2. flex-wrap:nowrap(默认）/wrap/wrap-reverse(row方向时依然从做到右，但是却是从下到上，很少用）

3. flex-flow:简写 flex-direction flex-wrap（如：row-reverse row)

4. justify-content:flex-start/flex-end/center(居中）/space-between(两端对齐，中间等分)/space-around（子项与两端的距离是中间子项之间距离的一般）/space-evenly（子项与两端的距离等于中间子项之间距离）；

5. align-items:normal(在弹性布局中，效果和stretch一样）/stretch(当子项在cross axis方向的size为auto时即没有设置盒子高度时，会自动拉伸至填充flex container）/flex-start(与cross start对齐）/flex-end(与cross end对齐）/center(居中对齐）/baseline(与基线对齐）

6. align-content:决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似，flex-start/flex-end/center(居中）/space-between(两端对齐，中间等分)/space-around（子项与两端的距离是中间子项之间距离的一般）/space-evenly（子项与两端的距离等于中间子项之间距离）/stretch（(默认值）与align-items的stretch类似，子项没有设置高度时拉升）；

2. flex items上的属性有：

1. order:决定了flex items的排布顺序，可以设置任意整数（正整数、负整数、0），值越小就越排在前面（子项单独选择器进行设置）

2. align-self:给子项单独设置该属性可覆盖flex container中的align-items值，auto（默认值：遵从父盒子的align items的设置）/stretch/flex-start/flex-end/center/baseline(效果跟align-items一致）。

3. flex-grow:决定子项如何扩展（拉伸/成长），可以设置任意非负数字（正小数、正整数、0）默认为0；当父盒子在主轴上又剩余size时，flex-grow才会有效；如果所有子项的flex-grow总和超过1，每个子项扩展的size为父盒子剩余size*flex-grow/sum;子项扩展后的最终size不能超过max-width/max-height所设置的子项值。

4. flex-shrink:巨顶了子项如何收缩（缩小）；可以设置任意非负数字（正小数、正整数、0）默认为1；当父盒子在主轴上又剩余size时，flex-shrink才会有效；如果所有子项的flex-shrink总和超过1，每个子项扩展的size为父盒子剩余size*收缩比例/所有flex items的收缩比例之和;子项收缩后的最终size不能超过max-width/max-height所设置的子项值。

5. flex-basis:设置flex子项在主轴方向上的base size,值：auto/具体的宽度数值（需要跟单位px）；决定子项最终base size的因素，优先级为：max-width/max-height/min-width/min-heigth > flex-basis（当没有设置宽度的时候，如果一个单词长度大于basis size时，会自动将它撑开，如果同时还有宽度，会受宽度值影响） >width/height > 内容本身的size。

6. flex:是flex-grow||flex-shrink||flex-basis的简写，可以指定1个，2个，3个值。一个无单位为grow，1个有单位是basis,两个无单位是grow和shrink.none表示（0 0 auto）auto表示（1 1 auto）

其它：

当有justify-content:space-between;及flex-wrap：wrap;时可能会遇到最后一行的数量大于1个小于列数，此时解决方法：

1. 就算出剩余宽度给子项设置margin-right,最后一列不设置，且去掉justify-content:space-between;

2. 给子项后面添加span或者i元素等（个数为列数-2），并设置添加元素的宽度等于子项的宽度，但是不能设置高度等其它样式。