Flexbox

注意:Emmet 不支持中括号

Flex Container

用一个类名同时定义多个属性,仅三个主要类名。

MethodExampleCSS
Direction[A]display, flex-direction
Inline[FS]align-items, justify-content
Multiple lines[[+S]]align-content, flex-wrap

在本页中,表格中加粗的一行代表 CSS 的缺省值。

方向

参考 XBOX 控制器的键位。

flexinline-flex
[Y][y]
[X][B][x][b]
[A][a]
Code

单行定位

参考 place-items 语法,align 在前。

place-items = 
  <'align-items'> <'justify-items'>?

align-items 的有效值如下表:

CSS ValueComment
Sflex-startStart
CcenterCenter
Eflex-endEnd
FstretchFull
BbaselineBaseline
Code

justify-content 的有效值如下表:

CSS ValueComment
Sflex-startStart
CcenterCenter
Eflex-endEnd
0space-between0/2 to edge
1space-evenly1/2 to edge
2space-around2/2 to edge
Code

多行定位

flex-wrap 具有 no-wrap wrap wrap-reverse 三种情况,意味着我们需要支持反方向。

[[+S]]flex-wrap: wrap
[[-S]]flex-wrap: wrap-reverse

若不启动此标志位,则默认不换行。

ailgn-content 的有效值如下表:

CSS ValueComment
Sflex-startStart
CcenterCenter
Eflex-endEnd
0space-between0/2 to edge
1space-evenly1/2 to edge
2space-around2/2 to edge
FstretchFull
Code

Flex Item

ClassCSS
[+0]flex-grow: 0
[+1]
[+2]
[+3]
[+4]
[+5]
[-0]flex-shrink: 0
[-1]
[-2]
[-3]
[-4]
[-5]