cs3——弹性盒子

 

父类排列

1、flex-direction：子项目的排列方向

　　row：左到右　　　　row-reverse：右到左　　　　column：上到下　　　　column-reverse：下到上

2、flex-wrap：子项目多行

　　nowrap　　　　　   wrap　　　　　　wrap-reverse

　　12345　　　　　　 123　　　　　　  45

　　　　　　　　　　　 45　　　　　　   123　

3、justify-content：水平对齐

　　flex-start　　　　flex-end　　　　center　　　　space-between　　　　space-around

　　左对齐　　　　　右对齐　　　　  居中　　　　   1        2　　  3　　　　     1　2　 3

4、align-items：垂直对齐

　　stretch　　　　flex-start　　　　flex-end　　　　center　　　　baseline

　　1  2  3　　　　  上　　　　　　　 下　　　　　　　中　　　　  内容对齐　

　　1  2  3　

5、align-content：多行对齐

　　stretch　　　　flex-start　　　　flex-end　　　　center　　　　space-between　　　　space-around

　　（默认）　　　　上　　　　　　　下　　　　　　中　　　　　 1        2　　  3　　　　     1　2　 3

子类排列　

　　order：2　　　　flex-grow：2　　　　flex-shrink：2

　　顺序指定　　　　    延伸　　　　　　　　收缩

  子要素垂直：align-self

　　　　flex-start　　　　flex-end　　　　center

　　　　　上　　　　　　　下　　　　　　中