CSS Flex 布局常用属性总结

如果一个元素设置了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