设置方式:给父元素设置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:不换行(默认) (弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。) |
标签:flex,盒子,默认,弹性,对齐,display From: https://www.cnblogs.com/nizi-ver1/p/17545696.html