5a443e6672
- added functionnal css for flexbox positionning - changed cv infos order according to real cv
190 lines
10 KiB
Markdown
190 lines
10 KiB
Markdown
|
|
direction | width | child | child | child
|
|
| | position | main axis | second axis
|
|
................................................................
|
|
horizontal | content | left |-pack |-fit
|
|
vertical |-parent | right | grow | stretch
|
|
| | top | space |
|
|
| | bottom | spread |
|
|
| |-center | |
|
|
|
|
.<direction>-<width>-<position-[position]>-<main-axis>-<second-axis>
|
|
|
|
position :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left-top . . top . . right-top . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left . .-center . . right . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left-bottom . . bottom . . right-bottom. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
width :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . parent . .
|
|
. . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . . content .
|
|
. . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
main axis :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . space . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . spread. . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .-pack . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . grow . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
second axis :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . .
|
|
. .-fit . . . . . .stretch. . . .
|
|
. . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
|
|
|
|
|
|
----------------------------------------------------------------
|
|
|
|
**v2 :**
|
|
|
|
|
|
direction | width | child | child | child
|
|
| | position | main axis | second axis
|
|
................................................................
|
|
horizontal | fit | left |-pack | begin
|
|
vertical | large | right | grow | end
|
|
| | top | space |-middle
|
|
| | bottom | spread | equal
|
|
| |-center | | stretch
|
|
|
|
.<direction>-<width>-<position-[position]>-<main-axis>-<second-axis>
|
|
|
|
position :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left-top . . top . . right-top . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left . .-center . . right . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left-bottom . . bottom . . right-bottom. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
main axis :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . space . . . . . . justify-content
|
|
. . . . . . . . . . . . . . . . . : space-around
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . spread. . . . . . justify-content
|
|
. . . . . . . . . . . . . . . . . : space-between
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .-pack . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . grow . . . . . . child :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . grow: 1;
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
second axis :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . begin . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . .
|
|
. .-middle. . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . . . . . . . equal . . . . . .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
. . end . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . .
|
|
. .stretch. . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
|
|
|