display:flex弹性布局

 

设置方式：给父元素设置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:不换行(默认) （弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。）