19-CSS弹性盒布局

一、弹性盒的概念

1. 容器：设置了弹性盒属性的父级元素
2. 项目：在容器里面的子级元素
3. 作用：控制项目在容器里面的排列位置

二、弹性盒的设置

1. 属性/属性值：display: flex;
2. 基本特点：
   • 元素设置了弹性盒属性，就会有主轴和侧轴的概念
   • 弹性盒中默认的主轴方向是x轴，所有的项目都会沿着主轴排列（主轴侧轴是对应关系）
   • 弹性盒中不考虑元素类型，所有的标签都可以直接添加宽高大小
   • 弹性盒中的居中方式，给子级元素设置margin: auto; 即可

三、关于弹性盒使用的注意点

1. 盒模型（margin/padding）、定位、位移可以用
2. 没有脱离文档流
3. 在弹性盒中不需要清除浮动也不会出现高度塌陷

四、添加在父级容器上的属性

1. 改变主轴的排列方向：默认的主轴是X轴

   1. 属性：flex-direction
   2. 属性值
      • row 行，默认主轴是X轴，侧轴是Y轴
      • column 列，默认主轴是Y轴，侧轴是X轴
      • row-reverse 反向显示，默认主轴是X轴
      • column-reverse 反向显示，默认主轴是Y轴

2. 设置主轴上的排列方式

   1. 属性：justify-content
   2. 属性值：
      • flex-start 在主轴的开始位置
      • flex-end 在主轴的结束位置
      • center 在主轴的中间
      • space-between 两端对齐，其余空间自动分配
      • space-around 项目的左侧和右侧间距空间一样
      • space-evenly 表示所有的空间全部自动分配（相等的）

3. 设置侧轴上的排列方式

   1. 属性：align-items

   2. 属性值：

      • flex-start 在侧轴的开始位置

      • flex-end 在侧轴的结束位置

      • center 在侧轴的中间

      • baseline 基线对齐（默认情况下和flex-start情况一样）

        文本的基线是在文字底部

      • stretch 拉伸（没有设置高度的时候）

4. 换行属性

   在PC端布局中，当元素宽度过多的时候，最后的元素不会往下掉（之前解决方法：min-width/百分比），当子级元素的宽度大于父级元素宽度的时候默认是挤压的（不会掉下去）

   1. 属性：flex-wrap
   2. 属性值：no-wrap 不换行，wrap 换行

5. 行与行之间的间距

   1. 属性：align-content
   2. 属性：
      1. flex-start 换行后无行间距
      2. flex-end 在主轴的结束位置
      3. center 在主轴的中间
      4. space-between 两端对齐，其余空间自动分配
      5. space-around 项目的左侧和右侧间距空间一样
      6. spave-evenly 表示所有的空间全部自动分配（相等的）

五、添加在子级项目上的属性

直接子级

1. 控制项目的显示顺序

   1. 属性：order
   2. 属性值：数字，数字越大越往后显示

2. 设置单个元素在侧轴上的对齐方式

   1. 属性：align-self
   2. 属性值：
      • flex-start/end/center/baseline/stretch

3. 【重点】子级元素在父级元素中主轴方向的占比方式

   1. 属性：flex

   2. 属性值：数字，表示在父级中所占的比例

      • 常见的情况：1、2、3（1/6, 1/3, 1/2）

      • flex:1 占据主轴上剩余的空间

        移动端main部分（除去header和footer剩下的空间）

        1. 给父级设置弹性盒
        2. 改变父级主轴的方向，y轴
        3. 给占据剩下空间的子级元素设置flex:1

    拓展：
    flex为1是由三个属性复合而成的：flex-grow、flex-shrink、flex-basis
    1. flex-grow 表示当前元素比其他元素设置更多的宽度
    	0 - 表示正常显示
    	1 - 表示自动分配空间
    2. flex-shrink 表示当前元素相对其他元素进行显示减小的宽度
    	0 - 表示不会收缩
    	1 - 表示会收缩
    3. flex-basis 项目的宽度
    	0~100%
    4. 总结
    	- 关于三个属性的默认值：0 1 auto 表示主体内容正常显示，并且会根据终端大小进行收缩显示
    	- 关于三个属性的重要值：1 1 0%（简写为flex:1） 表示当前主体内容会根据主轴剩下空间自动分配，并且会根据手机屏幕大小进行收缩显示，如果有很多子级内容会自动撑开大小
1
2
3
4
5
6
7
8
9
10
11
12
13

案例1：常见移动端布局的实现（仿旧版支付宝布局）

案例2：圣杯布局的实现