css3 伸缩布局
2019-04-11 本文已影响0人
醉了俗身醒了初心
伸缩布局
-
设置父元素为伸缩盒子, (直接父元素)
-
为什么伸缩盒子子元素在一行上显示?
- 子元素是按照伸缩盒子主轴方向显示
- 只有伸缩盒子才有主轴和侧轴
- 主轴默认水平, 从左向右显示
- 侧轴始终垂直于主轴
-
设置盒子主轴方向 (flex-direction)
- flex-direction:row;(默认值)
- flex-direction:row-reverse;
- flex-direction:column;
- flex-direction:column-reverse;
-
设置元素在主轴的对齐方式(justify-content)
- justify-content: flex-start;
- justify-content: flex-end;
- justify-content: center;
- justify-content: space-between;
- justify-content: space-around;
-
设置元素在侧轴的对齐方式(align-items)
- align-items: flex-start;
- align-items: flex-end;
- align-items: center;
- align-items: stretch;(默认值)
-
设置元素是否换行显示(flex-wrap)
- 在伸缩盒子中所有的元素默认都会在一行上显示
- 如果希望换行:
flex-wrap: wrap | nowrap;
-
设置元素换行后的对齐方式( align-content)
- align-content: flex-start;
- align-content: flex-end;
- align-content: center;
- align-content: space-around;
- align-content: space-between;
- align-content: stretch;(换行后的默认值)
-
子元素中的属性
- flex:1(数值) 代表子元素在主轴方向所占的比例, 权重
- order:1(数值) 改变子元素排列顺序