伸缩容器

1、伸缩容器

display: inline-flex

无文本内容：一行中文字的基线是容器的基线

有文本内容：容器和一行中文字的基线对齐（第一个文本盒子）

display: flex

主轴对齐（justify-content）

flex-start
center
flex-end

space-around - 空间环绕项目
space-between - 项目包裹空间

侧轴对齐 （align-items）
伸缩项目所在行的侧轴对齐

flex-start
center
flex-end

stretch (拉伸：默认值)
baseline 找一行中最大的基线对齐

侧轴对齐 （align-content）
生效前提：设置 flex-wrap: wrap / wrap-reverse , 设置伸缩项目宽度，导致产生多行。

让伸缩项目统一在 侧轴 对齐。

flex-start
center
flex-end

space-around - 空间环绕项目
space-between - 项目包裹空间

包裹伸缩项目（flex-wrap）

nowrap
默认值：包裹 --- 主轴空间不足压缩伸缩项目
wrap
主轴空间不足，换行显示。
wrap-reverse
改变了侧轴的 start 和 end 位置

改变主轴，侧轴方向(flex-direction)

row
默认

row-reverse
主轴的 start 和 end 对调

column
主轴和侧轴对调

column-reverse

主轴和侧轴对调， 主轴的 start 和 end 对调

伸缩项目

侧轴对齐（align-self）

flex-start
center
flex-end

stretch (拉伸：默认值)
baseline 找一行中最大的基线对齐

分配主轴的剩余空间（flex-grow）
number

主轴方向初始化的长度（大小） （flex-basis）

当主轴方向与宽度一致，会覆盖宽度样式。

压缩率(flex-shrink)

number
默认值： 1

压缩率计算：必须包含flex-basis 和 flex-shrink

沿着主轴排序 (order)
number

多媒体选择器（@media）