【CRR学习笔记】CSS之display:flex详解

560 阅读1分钟

CSS

display: flex

前言

在flex出现之前,网页布局常常是前端工程师的噩梦。它的出现减少了前端开发者在控制元素对齐方式,空间占比,横竖排列等的时间。

flex属性

容器属性 子项属性
flex-direction flex
justify-content flex-grow
align-content flex-shrink
align-items flex-basis
flex-flow order
flex-wrap align-self

容器属性

顾名思义,这里的属性是作用于display:flex的容器元素的。

initial : 关键字将属性的初始(或默认)值应用于元素。

inherit: 关键字使得元素获取其父元素的计算值。它可以应用于任何CSS属性,包括CSS简写 all。

unset: 关键字会优先用 inherit的样式,其次会应该用initial的样式。它允许应用任意的CSS样式,包括CSS缩写 all 关键字。

除了这三个属性,每个容器属性还有如下属性值。

属性名 属性值
flex-direction row/column/row-reverse/column-reverse
flex-wrap nowarp/wrap/wrap-reverse
flex-flow <‘flex-direction’> <‘flex-wrap’>
justify-content flex-start/flex-end/center/space-between/ space-around/space-evenly
align-items stretch/flex-start/flex-end/center/baseline
align-content stretch/flex-start/flex-end/center/space-between/ space-around/space-evenly

justify-content和align-content分别是水平方向和垂直方向flex子项的对齐方式 align-content在只有一行时不生效。

align-items代表每一行元素在垂直方向的对齐方式;

flex-wrap表示是否换行,默认不换行

flex-flow是flex-direction 和 flex-warp的缩写

子项属性

属性名 属性值
order 'integer'; /* 整数值,默认 0 */
flex-grow 'number' /*数值,可以是小数,默认0 */
flex-shrink 'number' /* 数值,默认 1 */
flex-basis 'length'/auto
flex none / auto / [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]
align-self auto/ flex-start/ flex-end/center/baseline/stretch