flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列，自动计算布局内元素的尺寸，无论元素的尺寸是固定的还是动态的，控制元素在页面的布局方向。
弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器设置属性 display:flex;
一、容器属性
- flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：
flex-flow: row nowrap;⑴ flex-direction 子元素排列方向
- flex-direction: row; 从左到右
- flex-direction: row-reverse; 从右到左
- flex-direction: column; 从上到下
- flex-direction: column-reverse; 从下到上 ⑵ flex-wrap 子元素换行方式
- flex-wrap: nowrap; 不换行
- flex-wrap:wrap; 换行
- flex-wrap: wrap-reverse; 反转 wrap 排列，行颠倒
- justify-content 子元素沿主轴对齐方式
- justify-content: flex-start;
- justify-content: flex-end;
- justify-content: center；
- justify-content: space-between;
- justify-content: space-around;
- justify-content: space-evenly;
- align-items 子元素在交叉轴上对齐方式
- align-items: center; 垂直方向居中
- align-items:flex-start; 垂直方向的顶部/交叉轴的起点对齐
- align-items: flex-end; 垂直方向的底部/交叉轴的终点对齐
- align-items: baseline; 项目的第一行的文字的基线对齐
- align-items: stretch; 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
- align-content 用于修改 flex-wrap 属性的行为,置各个行的对齐。
前提：设置
flex-wrap:wap;
- align-content：flex-start;
- align-content：flex-end;
- align-content：center;
- align-content：space-around;
- align-content：space-between;
二、子元素属性 （写在子元素下）
- align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
- align-self: center;
- align-self: flex-start;
- align-self: flex-end;
- align-self: baseline;
- align-self: stretch;
-
order 定义子元素的排列顺序。数值越小，排列越靠前，默认为
order: 0;，可以为负值。 -
flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。
负值无效。
- flex-grow: 0; 默认值，即如果存在剩余空间，也不放大。
- flex-grow: 1; 如果存在剩余空间，放大 ，等分剩余空间。
- flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。
- flex-shrink: 1; 默认值，即如果空间不足，缩小。
- flex-shrink: 0; 不缩小。
- flex-basis 定义元素的默认基准值。 设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。
如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。
