flex弹性布局

---

伸缩容器的属性

display: flex

定义为弹性布局

flex-direction 决定主轴的方向

flex-directon: row 默认值，定义主轴方向为X轴，从左到右排列；
flex-directon: row-reverse 定义主轴方向为X轴，从右到左排列；
flex-directon: column 定义主轴方向为Y轴，从上到下排列；
flex-directon: column-reverse 定义主轴方向为Y轴，从下到上排列；

justify-content 元素在主轴方向上的对齐方式

justify-content: flex-start 默认值，定义元素在主轴方向的起始位置对齐；
justify-content: flex-end 定义元素在主轴方向的结束位置对齐；
justify-content: center 定义元素在主轴方向的中心位置对齐；
justify-content: space-between 定义元素平局分配在主轴上， 第一个元素在主轴的起始位置，最后一个元素在主轴的结束位置；
justify-content: space-around 在每行上均匀分配弹性元素，相邻元素间距相等，每行第一个元素到行首的距离和最后一个元素到行尾的距离相邻元素间的一半；

image.png

align-items 元素在交叉轴方向上的对齐方式

align-items: flex-start 定义元素在交叉轴方向上的起始位置对齐；
align-item: flex-end 定义元素在交叉轴方向上的结束位置对齐；
align-item: center 定义元素在交叉轴方向上的中心位置对齐；
align-item: stretch 默认值，当元素没有设置大小时，主轴方向上的尺寸由内容撑开，交叉轴方向上的尺寸自适应铺满。
align-item: baseline 设置元素基线对齐；

align-content定义了多根轴线的对齐方式。

如果项目只有一根轴线，该属性不起作用。
align-content: flex-start 定义元素在交叉轴方向上的起始位置对齐；
align-content: flex-end 定义元素在交叉轴方向上的结束位置对齐；
align-content: center 定义元素在交叉轴方向上的中心位置对齐；
align-content: stretch 默认值，当元素没有设置大小时，主轴方向上的尺寸由内容撑开，交叉轴方向上的尺寸自适应铺满。
align-content: space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
align-content: space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

flex-wrap 定义元素是否换行

flex-wrap: nowrap 默认值 不换行；
flex-wrap: wrap 换行，第一行在上方；
flex-wrap: wrap-reverse 换行第一行在下方；

flex-flow

flex-flow是flex-direction和flex-wrap的简写形式，默认值为：row nowrap;

伸缩子项的属性

order定义伸缩子项的排列顺序

默认值为0，数值越小，排列越靠前，可以设置负值

flex-grow 定义伸缩子项的放大比例

默认值为0，即如果存在剩余空间，也不放大；
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 定义伸缩子项的缩小比例

默认值为1，即如果空间不足，该项目将缩小；
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis 项目占据的主轴空间

当成width使用；

flex 复合写法

flex: flex-grow flex-shrink flex-basis;

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

align-self: auto 默认值，表示继承元素的align-items属性
align-self: flex-start 定义元素在交叉轴方向上的起始位置对齐；
align-self: flex-end 定义元素在主轴方向的结束位置对齐；
align-self: center 定义元素在交叉轴方向上的中心位置对齐；
align-self: baseline 设置元素基线对齐；
align-self: stretch 当元素没有设置大小时，主轴方向上的尺寸由内容撑开，交叉轴方向上的尺寸自适应铺满。