设置主轴方向和弹性盒子换行~~~~

1.

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

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

flex-direction:column;

修改完毕,主轴是Y轴, 侧轴是X轴。

2.弹性盒子换行

特性: 给父亲添加了 display: flex; 所有的子盒子(弹性盒子)都会在一行显示,不会自动换行。

弹性盒子换行显示 : flex-wrap: wrap;

3  设置侧轴对齐方式

  1. 此处设置侧轴多行的垂直对齐方式。 align-content(少)

  2. 和前面学过的 align-items (侧轴单行垂直对齐) (多)

  3. align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐

  4. content 主轴 justify-content align-content 侧轴多行对齐

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

你可能感兴趣的:(css,html,css3)