Flex弹性盒子
2021-02-24 16:57:23 11 举报AI智能生成
详解Flex属性与值
作者其他创作
大纲/内容
Flex容器
flex-direction
用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
row
row-reverse
column
column-reverse
flex-wrap
控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反方向显示。
nowrap
wrap
wrap-reverse
flex-flow
flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
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
垂直居中对齐
baseline
flex子项都相对于flex容器的基线（字母x的下边缘）对齐。
align-content
指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行，则align-content属性是没有任何效果的。
stretch
默认值。每一行flex子元素都等比例拉伸。
flex-start
顶部堆砌
flex-end
底部堆放
center
垂直居中对齐
space-between
上下两行两端对齐。剩下每一行元素等分剩余空间。
space-around
每一行元素上下都享有独立不重叠的空白空间。
space-evenly
每一行元素都完全上下等分。
Flex子项
order
改变某一个flex子项的排序位置
order: <integer>; /* 整数值，默认值是 0 */
如果我们想要某一个flex子项在最前面显示，可以设置比0小的整数，如-1。
flex-grow
扩展flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。
所有剩余空间总量是1
flex-grow: <number>; /* 数值，可以是小数，默认值是 0 ，不支持负值*/
flex-shrink
处理当flex容器空间不足时候，单个元素的收缩比例
flex-shrink: <number>; /* 数值，默认值是 1，不支持负值 */
默认所有的flex子项都会收缩，设置为0，则表示不收缩
flex-basis
在分配剩余空间之前元素的默认大小
flex-basis: <length> | auto; /* 默认值是 auto */
flex
flex-grow，flex-shrink和flex-basis的缩写。
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex默认值等同于flex:0 1 auto
flex:none等同于flex:0 0 auto
flex:auto等同于flex:1 1 auto
align-self
控制单独某一个flex子项的垂直对齐方式
auto
flex-start
flex-end
center
baseline
stretch
0 条评论
下一页
