【web】--弹性布局

弹性布局（弹性盒模型）

给父元素设置display：flax，来控制子元素的布局

设置主轴方向 flex-direction：row；默认

row（水平）	默认，起点在左
row-reverse	起点在右
column（竖直）	起点在上边
column-reverse	起点在下边

设置是否换行 flex-wrap: no-wrap;默认不换行

默认子元素不换行，如果放不下就缩小子元素盒子

属性值	说明
nowrap	默认不换行
wrap	换行

调整换行排列方式 align-content

多行

属性值	说明
flex-start	默认值从侧轴头部排列
flex-end	从侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头 再平分剩余空间
stretch	设置子项元素高度平分父元素高度

设置主轴对齐方式 justify-content: flex-start;

定义了项目在主轴上的对齐方式

（使用之前要确定好主轴）

属性值	说明
flex-start	默认值从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐，如果主轴是x轴则水平居中
space-around	每个元素之间间隔相等
space-between	两端对齐，中间元素间隔相等
space-evenly	每个元素之间，两端，都间隔相等

交叉轴对齐方式align-items

属性值	说明
flex-start	起点对齐
flex-end	终点对齐
center	垂直居中
baseline	项目第一行文字下基线对齐
stretch	拉伸（但是子盒子不要给高度）

flex: 1/flex-grow 剩余空间分配比例

​ 写在子级，设置子元素比例，分配剩余空间（ style=“flex: 1;”）

圣杯布局：固定 flex-grow: 1 固定