Flex弹性布局笔记
-
flex-direction:文本排列方向
- row:默认值,水平排列,从左侧开始排序
- row-reverse:水平排序,从右侧开始排序
- column:垂直排序,从上到下进行排序
- column-reverse:垂直排序,从下到上进行排序
-
flex-wrap:文本是否换行排序
- nowrap:默认,不换行
- wrap:换行,进行多行排列
- wrap-reverse:换行,第一行在最下方
-
align-content:多行排列时使用对齐,如果只有单行该属性不生效
- stretch:默认值,轴线占满整个交叉轴。
- center:居中,与交叉轴中点对齐
- flex-start :左侧开始排序,与交叉点的起点对齐
- flex-end: 右侧开始排序,与交叉点的终点对齐
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
-
justify-content:根据主轴进行对齐
- flex-start :默认值,左侧开始排序进行对齐,
- center:居中
- flex-end: 右侧开始排序进行对齐,
- space-between:两端对齐,元素之间的间隔都相等
- space-around:每个元素两侧的间隔相等,所以元素之间的间隔比跟边框的间隔大一倍
-
align-items :在交叉轴上进行对齐
-
stretch:默认值,如果元素没有设置高度或设为auto,将占满整个容器的高度
-
flex-start:左侧开始排序,交叉轴的起点对齐
-
flex-end:右侧开始排序,交叉轴的终点对齐
-
center:居中,交叉轴的中点对齐
-
baseline: 项目的第一行文字的基线对齐
-
-
flex属性
-
flex-grow, flex-shrink 和 flex-basis的简写
-
flex:1
-