移动web主轴设置和flex总结

• • 设置主轴方向
  • • 修改主轴经常的使用场景：
  • 弹性盒子换行
  • 设置侧轴对齐方式
  • flex 总结梳理
  • • 主轴排列方式
    • 侧轴对齐方式-单行对齐
    • 侧轴对齐方式-多行
    • 弹性盒子换行
    • 设置主轴方向
    • 伸缩比

设置主轴方向

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

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

语法：

flex-direction：column;

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

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

请完成如下场景：

  
机票
火车票

弹性盒子换行

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

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

语法：

flex-wrap: wrap;

设置侧轴对齐方式

注意:

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

align-content：center；

flex 总结梳理

flex 它是一种布局方式。 主要目的是通过父盒子控制子盒子如何排列。

主轴排列方式

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

1. 如果给父盒子添加 display: flex
   
2. justify-content: center;
   
3. justify-content: space-between; 左右两侧无缝隙
   
4. justify-content: space-around; 两倍关系
   
5. justify-content: space-evenly; 缝隙均等1
   

侧轴对齐方式-单行对齐

1. 默认的对齐方式 stretch 拉伸

2. 顶对齐 flex-start
   

3. 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 水平的。

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加

flex:1;