flex布局：
他的布局主要有两个“二”，一个二：容器项，子项目项。
另一个：有两条轴，主轴，副轴。
它的使用时，必须先声明说明是flex布局：display：flex;
针对于容器项的属性6个：
1、flex-direction:row/row-reverse/column/column-reverse;
它申明了利用弹性盒布局的主轴方向，行和列，或者逆秩。申明了它接下来的布局都是在他的方向上布局。
2、flex-wrap:nowrap/wrap/wrap-reverse;
它申明了容器下的子元素是否允许换行。
3、flex-flow:row wrap;
前两种的合体，说明什么方向，是否换行。
4、just-content:（有5个属性值）flex-start/flex-end/center/space-between/space-around
说明容器下的子项对齐方式。
flex-start:从开始的方向对齐。
flex-end:从结束的地方开始对齐。
center: 居中对齐。
space-between:两端对齐。
space-around:四周对齐，子项目在主轴的两侧会均匀分布剩余空间，注意中间的回事两倍的距离。
5、align-item:（有5个属性）flex-start/center/flex-end/stretch/baseline
定义子项目在交叉轴上对其的方式。交叉点：主轴与边框的交叉的位置。
stretch:(默认值)如果项目未设高度或者是auto，则项目会自动占满整个容器的高度。
baseline:项目的第一行文字线对齐。
6、align-content:（6个属性）flex-start/flex-end/center/stretch/space-around/space-between
定义了多条轴线的对齐方式，如果有一行轴线该属性不起做用。
stretch:在交叉轴上或铺满整个容器。
正对于子项目的6个属性：
order/flex-grow/flex-shrink/flex-basis/flex/align-self
1、order:
order: <integer>;
定义排列的顺序，数值越小，排列越靠前，默认为0；
2、flex-grow:
flex-grow: <number>; /* default 0 */
定义项目放大，默认为0，如果存在剩余空间才会放大，如果没有剩余空间则不会放大。
3、flex-shrink:
flex-shrink: <number>; /* default 1 */
定义项目缩小，默认为1，如果该空间不够则会缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
4、flex-basis:
flex-basis: <length> | auto; /* default auto */
定义分配多余空间之前，项目占据主轴的空间。浏览器根据此属性计算主轴是否有多余空间，默认为auto;及项目本身的大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
5、flex:
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
是flex-grow/flex-shrink/flex-basis的简写，三个可以合成。
6、align-self:
align-self: auto | flex-start | flex-end | center | baseline | stretch;
允许该单个项目与其他项目有不一样的对齐方式，如果对子项目设置此属性则会覆盖掉容器align-item设置的对齐方式。默认为auto，继承父元素的对齐方式。
浙公网安备 33010602011771号