-
flex布局原理
通过给父盒子添加flex属性来控制子盒子的位置和排列方式 -
常见父项属性
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: flex-direction | flex-wrap 复合属性
单行属性 :
主轴
justify-content: flex-start | flex-end | center | space-between | space-around;
space-between:两端对齐,项目之间的间隔都相等;
space-around:每个项目两侧的间隔相等;
侧轴
align-items: flex-start | flex-end | center | baseline | stretch;
多行属性:
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- 常见子项item的属性
flex:num,表示子项目分配剩余空间,所占份数
align-self,控制子项自己在侧轴上排列的方式,所以这个方法用在子项自己身上,而不是父项