如果一个元素设置了
display: flex;
,则该元素为 flex 容器,其子元素为 flex 子元素
容器属性
- flex-direction:决定主轴方向
flex-direction: row | row-reveres | column | column-reverse
- flex-wrap:决定一条轴线如果排不下,如何换行
flex-wrap: nowrap | wrap | wrap-reverse
- flex-flow:上述两个属性的缩写
flex-flow: <flex-direction> || <flex-wrap>
- justify-content:决定主轴上的对齐方式
justify-content: flex-start | flex-end | center |
space-between | space-around
// space-between 两端对其,间隔一样
// space-around 元素左右间隔一样,所以元素间的间隔更大一点
- align-items:决定交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch
// baseline 项目第一行文字的基线对齐
// stretch 默认值 如果元素未设置高度或设为auto,将充满整个容器的高度
- align-content:决定多根轴线下的对齐方式(如果仅一根~,则不起作用)
align-content: flex-start | flex-end | center | space-between |
space-around | stretch
// space-between 与交叉轴两端对齐,轴线间间隔平均分布
// space-around 每根轴线两侧间隔相等
子元素属性
定义了可用空间的分配规则,可用空间就是元素排列完剩余的未占满空间
或者说定义元素的缩放规则
-
flex-grow:一般赋值为正整数
- 使元素在方向轴上延展,只有一个元素设置了该属性则该元素占据剩余可用空间,若有多个元素设置了~则按比列分配可用空间
-
flex-shrink:同上
- 正数让元素缩小所占空间,但是只有子元素超出主轴才会生效
-
flex-basis
- 默认值 auto,自动采用元素内容大小,如果元素设定了宽度,则为所设宽度
-
上述三种属性的缩写,按顺序
-
flex: <flex-grow> | <flex-shrink> | <flex-basis>
-
如果觉得对你有帮助的话,点个赞呗~
反正发文又不赚钱,交个朋友呗~
如需转载,请注明出处foolBirdd