【无标题】弹性盒模型

弹性盒模型

目的：提供了一种更有效的方式来布置，对齐和分布在容器之间的各项内容，即使他们的大小是未知变化的。
让容器有能力改变项目的宽高，以填满可用空间。（最适合小规模布局）

常见的属性

弹性盒模型使用需声明 display：flex/(display:inline-flex)

flex-direction

写在父级css中，作用于子级，检索子级在盒子中的位置（即子级的排列顺序）
可取值分别为row(横向，左到右) row-reverse(反横向)
column（纵向）column-reverse（反纵向）

flex-wrap

写在父级，作用于子级，检索子级是否超出父级（是否换行）
可取值nowrap(不换行) wrap(换行) wrap-reverse(反转wrap排列)

flex-flow

复合属性 写在父级，作用于子级
先写排列方式，再写是否换行

justify-content

检索弹性盒子在主轴（x）方向上的对其方式
写在父级，作用于子级
取值 flex-start （左对齐） flex-end（右对齐） center（居中）
space-between （两端居左居右，中间等间距）
space-around （n盒子的个数均分为n个空间，盒子在各自空间内居中）

align-items

检索盒子在Y轴上的对齐方式
写在父级，作用于子级
取值 flex-start（置顶） flex-end（置底） center（居中）
baseline（与基线对齐） stretch（置顶+置底，高度受到min-height与max-height制约）

align-content

检索换行时对齐方式
写在父级，作用于子级
取值 flex-start（置顶） flex-end（置底） center（居中）
space-between（置顶+置底，中间居中）
space-around（纵向平分空间，各行居中显示）
stretch （纵向平分空间，各行以最大方式显示）

order

排列顺序
写在子级
取值为阿拉伯数字，值越小，排位越靠前。

flex-grow

分配剩余空间
写在子级
取值为阿拉伯数字，值越大，分配空间越多