16.flexbox弹性盒模型
1.来源
需求：一种更为简单、有效的方式来对一个元素块中的子元素进行排列、对齐和分配空余空间。
2.基本概念
3.属性详解
①应用：display:flex;
②决定主轴的方向：flex-direction
- row; 主轴横向从左至右
- row-reverse;主轴横向，从右至左
- column;主轴纵向，从上至下
- column-reverse;主轴纵向，从下至上
③换行：flex-wrap: wrap;
④主轴方向的对齐方式：justify-content
- flex-end：右对齐
- flex-start（默认值）：左对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。
⑤交叉轴方向的对齐方式：align-items
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
⑥弹性增长因子flex -grow
该CSS属性设置子元素在弹性容器的具有剩余空间是应该如何分配给元素。flex-grow剩余空间是flex容器的大小减去所有flex项目的大小。如果所有兄弟项目具有相同的弹性增长因子，则所有项目将获得相同的剩余空间份额，否则将根据不同弹性增长因子定义的比率进行分配。
⑦弹性缩放因子flex-shrink
定义项目的缩小比例，即如果空间不足，该项目将缩小（默认为1）；
⑧flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选flex: flex-grow flex-shrink flex-basis;
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
⑨order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
⑩align-self属性
弹性盒子内的单个子元素在纵轴的顺序。
- auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。