前端自学笔记
作用在flex容器上
flex-direction
用来控制子项整体布局的方向,从左往右还是从右往左,从上往下还是从下往上
取值 | 含义 |
---|---|
row | 默认值。显示为行,方向从左向右 |
row-reverse | 显示为行,方向与row相反 |
column | 显示为列 |
column-reverse | 显示为列,方向与column相反 |
flex-wrap
用来控制子项整体单行显示还是换行显示
取值 | 含义 |
---|---|
nowrap | 默认值,单行显示,不换行 |
wrap | 宽度不足换行显示 |
wrap-reverse | 宽度不足换行显示,但是从下往上开始 |
flex-flow
是flex-direction和flex-wrap的缩写,表示flex布局的flow流动特性,第一个值表示方向,第二个值表示换行,中间用空格隔开justify-content
决定主轴方向上子项的对齐和排列方式
取值 | 含义 |
---|---|
flex-start | 默认值,起始位置对齐 |
flex-end | 结束位置对齐 |
center | 居中对齐 |
space-between | 两端对齐 |
space-around | 环绕,每个flex子项两侧都环绕互不干扰的等宽的空白间距 |
space-evenly | 视觉上,每个flex子项两侧空白间距完全相等 |
align-items
指flex子项们相对于flex容器在侧轴方向上的对齐方式(针对一行当中的每个子项)
取值 | 含义 |
---|---|
stretch | 默认值,flex子项拉伸 |
flex-start | 容器顶部对齐 |
flex-end | 容器底部对齐 |
center | 垂直居中对齐 |
align-content
和justify-content是相似且对立的属性,如果所有flex子项只有一行,则align-content属性没有任何效果(针对多行之间)
取值 | 含义 |
---|---|
stretch | 默认值,每一行flex子元素都等比拉伸 |
flex-start | 起始位置对齐 |
flex-end | 结束位置对齐 |
center | 居中对齐 |
space-between | 两端对齐 |
space-around | 每一行元素上下都享有独立不重叠的空白空间 |
space-evenly | 每一行元素都完全上下等分 |
作用在flex子项上
取值 | 含义 |
---|---|
order | 排序。可以通过设置order改变某一个flex子项的排序位置,默认order属性值为0 |
flex-grow | 扩展。扩展的是flex子项所占据的宽度,扩展所侵占的空间就是除去元素外的剩余的空白间隙,默认值为0 |
flex-shrink | 主要处理当flex容器空间不足时,单个元素的收缩比例,默认值为1 |
flex-basis | 定义了在分配剩余空间之前元素的默认大小 |
flex | 是flex-grow,flex-shrink和 flex-basis的缩写,默认0,1,auto |
align-self | 指控制单独某一个flex子项的垂直对齐方式 |