css弹性盒子

flex( Flexible Box 弹性盒⼦，伸缩盒)

1. 是css中的⼜⼀种布局⼿段，它主要⽤来代替浮动来完成⻚⾯的布局
2. flex可以使元素具有弹性，让元素可以根据⻚⾯的⼤⼩的改变⽽改变
3. 弹性容器

-要使⽤弹性盒，必须先将⼀个元素设置为弹性容器
-通过display来设置弹性容器 display:flex 设置块级弹性容器
display:inline-flex 设置为⾏内的弹性容器

flex-direction：
row（默认 值）：主轴为⽔ 平⽅向，起点在 左端。
row-reverse： 主轴为⽔平⽅ 向，起点在右 端。
column：主轴为 垂直⽅向，起点 在上沿。
column- reverse：主轴为 垂直⽅向，起点 在下沿。

flex-wrap：
nowrap（默 认）：不换⾏。
wrap：换⾏，第 ⼀⾏在上⽅。
wrap-reverse： 换⾏，第⼀⾏在 下⽅。

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

justify-content：
flex-start（默认 值）：左对⻬
flex-end：右对 ⻬
center： 居中
space- between：两端 对⻬，项⽬之间 的间隔都相等。
space-around： 每个项⽬两侧的间隔相等。所 以，项⽬之间的间隔⽐项⽬与边 框的间隔⼤⼀ 倍。
space- evenly:项⽬是 分布的，以便任何两个项⽬ 之间的间距 （和边缘的空 间）相等。

align-items：
flex-start：交叉 轴的起点对⻬。
flex-end：交叉 轴的终点对⻬。
center：交叉轴 的中点对⻬。
baseline: 项⽬的第⼀⾏⽂字的基 线对⻬。
stretch（默认 值）：如果项⽬ 未设置⾼度或设 为auto，将占满 整个容器的⾼ 度。

align-content：
flex-start：与交 叉轴的起点对 ⻬。
flex-end：与交 叉轴的终点对 ⻬。
center：与交叉 轴的中点对⻬。
space- between：与交 叉轴两端对⻬， 轴线之间的间隔平均分布。
space-around： 每根轴线两侧的间隔都相等。所 以，轴线之间的间隔⽐轴线与边 框的间隔⼤⼀ 倍。
stretch（默认 值）：轴线占满 整个交叉轴。