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 |