Flexbox
注意:Emmet
不支持中括号
Flex Container
用一个类名同时定义多个属性,仅三个主要类名。
Method | Example | CSS |
---|---|---|
Direction | [A] | display , flex-direction |
Inline | [FS] | align-items , justify-content |
Multiple lines | [[+S]] | align-content , flex-wrap |
在本页中,表格中加粗的一行代表 CSS 的缺省值。
方向
参考 XBOX 控制器的键位。
flex | inline-flex | |||||
---|---|---|---|---|---|---|
[Y] | [y] | |||||
[X] | [B] | [x] | [b] | |||
[A] | [a] |
Code
单行定位
参考 place-items 语法,align 在前。
place-items =
<'align-items'> <'justify-items'>?
align-items
的有效值如下表:
CSS Value | Comment | |
---|---|---|
S | flex-start | Start |
C | center | Center |
E | flex-end | End |
F | stretch | Full |
B | baseline | Baseline |
Code
justify-content
的有效值如下表:
CSS Value | Comment | |
---|---|---|
S | flex-start | Start |
C | center | Center |
E | flex-end | End |
0 | space-between | 0/2 to edge |
1 | space-evenly | 1/2 to edge |
2 | space-around | 2/2 to edge |
Code
多行定位
flex-wrap
具有 no-wrap
wrap
wrap-reverse
三种情况,意味着我们需要支持反方向。
[[+S]] | flex-wrap: wrap |
[[-S]] | flex-wrap: wrap-reverse |
若不启动此标志位,则默认不换行。
ailgn-content
的有效值如下表:
CSS Value | Comment | |
---|---|---|
S | flex-start | Start |
C | center | Center |
E | flex-end | End |
0 | space-between | 0/2 to edge |
1 | space-evenly | 1/2 to edge |
2 | space-around | 2/2 to edge |
F | stretch | Full |
Code
Flex Item
Class | CSS |
---|---|
[+0] | flex-grow: 0 |
[+1] | |
[+2] | |
[+3] | |
[+4] | |
[+5] | |
[-0] | flex-shrink: 0 |
[-1] | |
[-2] | |
[-3] | |
[-4] | |
[-5] |