块级元素
1
2
3
| .box{
display: flex;
display: -webkit-flex;
}
|
内联元素
1
| .box{
display: inline-flex;
}
|
容器属性
flex-direction
主轴的方向（即项目的排列方向）
1
| row | row-reverse | column | column-reverse
|
flex-wrap
一条轴线排不下，如何换行
1
2
| nowrap | wrap | wrap-reverse
不换行 | 换行 | 倒序换行
|
flex-flow
flex-direction属性和flex-wrap属性的简写形式
1
| <flex-direction> || <flex-wrap>
|
justify-content
项目在主轴上的对齐方式
1
| flex-start | flex-end | center | space-between | space-around
|
align-items
项目在交叉轴上如何对齐
1
| flex-start | flex-end | center | baseline | stretch
|
align-content
定义了多根轴线的对齐方式
如果项目只有一根轴线，该属性不起作用
1
| flex-start | flex-end | center | space-between | space-around | stretch
|
项目属性
align-self
单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
1
| align-self: auto | flex-start | flex-end | center | baseline | stretch
|
order
项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow
项目的放大比例，默认为0
flex-shrink
项目的缩小比例，默认为1
flex-basis
项目占据的主轴空间
1
| flex-basis: <length> | auto;
|
flex
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
1
| flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
