移动web基础(三) 弹性盒子下

1.设置主轴方向

1. 主轴默认是水平方向, 侧轴默认是垂直方向
2. 修改主轴方向属性: flex-direction
3. 属性值:默认为row 水平x 主轴排列

属性值	作用
row	行, 水平(默认值)
column	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

2.弹性盒子换行

1. 弹性盒子默认x轴排列不会进行主动换行,即使给予固定宽高,也会随宽度大小而改变
2. 弹性盒子换行显示 : flex-wrap: wrap    宽度不够自动换行   nowrap为不自动换行

3.设置侧轴对齐方式

1. 侧轴多行的垂直对齐方式: align-content
2. 侧轴单行垂直对齐: align-items
3. content 主轴对齐方式: justify-content             
4. align-content 侧轴多行对齐

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

4.flex 总结梳理

• flex 它是一种布局方式。 主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子
• 盒子容器,换行,对齐方式一定给亲父元素
• 侧轴多行对齐:align-content
• 侧轴单行对齐:align-items