设置主轴方向

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

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

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

语法:

 flex-direction:column;

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

修改主轴经常的使用场景:

请完成如下场景:

比如:携程的移动端首页的导航栏

   

 

 

弹性盒子换行

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

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

语法:

 flex-wrap: wrap;

 

设置侧轴对齐方式

注意:

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

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

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

主轴排列方式

默认的水平,但是可以转换。

  1. 如果给父盒子添加 display: flex

2.justify-content: center;

 

3.justify-content: space-between; 左右两侧无缝隙

 

4.justify-content: space-around; 两倍关系

 

5.justify-content: space-evenly; 缝隙均等

 

侧轴对齐方式-单行对齐

  1. 默认的对齐方式 flex-start

      

 

     2.align-items: center; (重点)

 

侧轴对齐方式-多行

  1. align-content: space-between;

 

     2.align-content: space-around;

 

     3.align-content: space-evenly;

 

     4.align-content: center;

 

弹性盒子换行

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

 flex-wrap: wrap;

设置主轴方向

 flex-direction: column;

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐