五、flex

2019-12-10  本文已影响0人  yuzhan550

-webkit-box
-webkit-flex / flex
主轴 侧轴

1. Old version:

布局方向:
-webkit-box-orient: horizontal/vertical
排列方向:
-webkit-box-direction: normal/reverse
富裕空间的管理:
webkit-box-pack
start end center justify
侧轴:
webkit-box-align
start end center

2. New version:

布局&排列方向:flex-direction
row row-reverse column column-reverse
富裕空间的管理:
justify-content
flex-start flex-end space-between space-around
侧轴:
align-items:
flex-start
flex-end
center
baseline (用得少)
stretch(等高布局,项目没有高度)
多行多列:
align-content:flex-start
单行单列:
align-items:flex-start

新版
上一篇下一篇

猜你喜欢

热点阅读