设置方式：给父元素设置display: flex，子元素可以自动挤压或拉伸
flex弹性容器里的弹性盒子可以设置宽高，比如a标签设置宽高生效，不用转块
|
描述 |
属性 |
值 |
|
创建flex容器（父级） |
display: flex |
|
|
主轴对齐方式
|
justify- content |
flex-start起点开始排列（默认） flex-end终点开始排列 center（工作中常用） space-between之间（工作中常用） space-around两侧（工作中常用） space-evenly 平均（工作中常用） |
|
行对齐方式
|
align- content
|
同上 注意：单行不生效 |
|
侧轴对齐方式 (给弹性容器设置 对象：当前弹性容器内所有弹性盒子)
|
align-items |
stretch沿侧轴尺寸拉伸铺满（侧轴没有尺寸默认拉伸）（常用） center沿侧轴居中（常用） flex-start起点开始排列（了解） flex-end终点开始排列（了解） |
|
某个弹性盒子 侧轴对齐方式 (给弹性盒子设置) |
align-self
|
同上 |
|
修改主轴方向
|
flex-direction
|
row 水平方向，从左向右（默认） column垂直方向，从上向下（只记这一个，其他工作中基本不用） row-reverse水平方向，从右向左 column-reverse垂直方向，从下向上 |
|
弹性伸缩比 （控制弹性盒子的主轴方向的尺寸 ）
|
flex
|
整数数字，表示占用父级剩余尺寸的份数。 |
|
. 弹性盒子换行
|
flex-wrap
|
wrap: 换行，不再挤压变小 nowrap:不换行(默认) （弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。） |