flex-direction设置主轴方向

207 阅读1分钟

1 设置主轴方向 主轴默认是水平方向 侧轴默认是垂直方向 修改主轴方向属性:flex:direction 属性值 作用 row 行,水平(默认值) column 列,垂直 row-reverse 行,从右往左 column-reverse 列,重下向上

2 如何计算几倍图 精灵图的宽度/装精灵图盒子的宽度=倍数

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

4 设置侧轴对齐方式 注意:

1此处设置侧轴多行的垂直对齐方式。align-content(少) 2 和前面学过的 align-items(侧轴单行垂直对齐) (多) 3 align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐 4 content 主轴 justify-content align-content 侧轴多行对齐

语法:align-content:center;

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

5 弹性盒子换行(重点)

特别是多行的情况下,我们需要给弹性盒子换行,给 父盒子 弹性容器加。 flex-wrap: wrap;

设置主轴方向(重点)

flex-direction: column;

让我们的主轴设置为垂直。 默认的是 row 水平的。