CSS篇——伸缩布局

伸缩布局的基本概念

伸缩容器：某个标签添加了"display:flex"属性，他就是伸缩容器。
伸缩项：伸缩容器的子元素为伸缩项
主轴：伸缩容器从左到右的方向称为主轴
侧轴：从上到下称为侧轴

主轴的对齐方式

在伸缩布局中, 默认情况下水平方向是主轴, 默认情况下主轴的起点在伸缩容器的最左边, 默认情况下所有的伸缩项都是从主轴的起点开始排版的，但是我们也可以通过属性来修改主轴的起点的位置。
flex-direction: 用于修改主轴起点的位置，取值：

• row: 起点在伸缩容器的最左边, 终点在伸缩容器的最右边. 从左至右的排版, 默认的取值

• row-reverse: 起点在伸缩容器的最右边, 终点在伸缩容器的最左边, 从右至左的排版

• column: 起点在伸缩容器的最顶部, 终点在伸缩容器的最底部, 从上至下的排版

• column-reverse: 起点在伸缩容器的最底部, 终点在伸缩容器的最顶部, 从下至上的排版

       **注意点: 在伸缩布局中主轴和侧轴永远都是十字交叉的, 只要主轴的方向发生了变化, 侧轴也会发生变化**
  

在设置好主轴方向后，要设置伸缩项的对齐方式:justify_content

            flex-direction: row; 主轴起点的默认值
            justify-content: flex-start; 主轴上伸缩项对齐的默认值
            注意点: 在设置对齐方式的时候一定要理解两步操作
            1.按照主轴起点对伸缩项进行排版
            2.按照指定的对齐方式对齐排版好的伸缩项
            /*justify-content: flex-start;*/起点对齐
            /*justify-content: flex-end;*/终点对齐
            /*justify-content: center;*/居中对齐
            /*justify-content: space-between;*/两端对齐
            可以看出类似于word排版文本对齐格式的四种

侧轴的对齐方式

1.统一设置全部伸缩项的对齐方式

/*告诉浏览器主轴的起点在伸缩容器的最左边, 告诉浏览器伸缩项从左至右的排版*/
            flex-direction: row;
            /*告诉浏览器排版好的伸缩项需要和主轴的起点对齐*/
            justify-content: flex-start;
            /*告诉浏览器排版好的伸缩项需要和侧轴的起点对齐*/
            /*align-items: flex-start;*/
            /*align-items: flex-end;*/
            /*align-items: center;*/
            /*
            注意点:
            侧轴对比主轴来说没有两端对齐(space-between)和环绕对齐(space-around)
            */
            /*baseline: 让所有伸缩项中的基线在一条直线上对齐*/
            /*align-items: baseline;*/
            /*
            stretch(拉伸对齐/等高对齐):
            让所有的伸缩项的高度变为侧轴的高度
            注意点:
            如果需要设置为拉伸对齐, 那么伸缩项不能设置高度
            如果伸缩项设置了高度, 那么拉伸对齐就会失效
            */

2.给每一个伸缩项单独设置一个对齐方式

 /*
            如果在伸缩容器中通过 align-items: 来控制伸缩项的对齐方式, 是一次性控制所有伸缩项的对齐方式
            如果想单独的控制某一个伸缩项在侧轴上的对齐方式, 那么需要将控制对齐方式的属性写到伸缩项中
            align-items: 写到伸缩容器中 / 控制所有伸缩项
            align-self: 写到伸缩项中 / 控制编写对应代码的那个伸缩项
            align-self: 的取值和align-items:的取值是一样的, 只是控制的范围和书写的位置不同而已
            */

默认情况下水平方向是主轴, 默认情况下主轴的起点在伸缩容器的最左边, 默认情况下所有的伸缩项都是从主轴的起点开始排版的，但是我们也可以通过属性来修改主轴的起点的位置。一旦主轴被修改，侧轴也会被修改，保持与主轴垂直的方向。

flex的换行问题

            /*
            1.默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项
            2.在伸缩容器中有一个叫做flex-wrap属性, 专门用于控制放不下是否需要换行的
            默认的取值: flex-wrap 不换行
            wrap: 放不下就换行 而不是等比压缩
            wrap-reverse: 放不下就换行 , 以行为单位进行反转
            */
            /*flex-wrap: nowrap;*/
            /*flex-wrap: wrap;*/
            /*flex-wrap: wrap-reverse;*/

            flex-wrap: wrap;
            /*
            在伸缩容器中有一个叫做align-content的属性, 是专门用于设置换行之后的对齐方式的
            注意点: 只有伸缩项发生了换行这个属性才有效
            flex-start: 换行之后和侧轴的起点对齐, 一行接一行
            flex-end: 换行之后和侧轴的终点对齐, 将所有换行之后的内容当做一个整体来操作
            center: 换行之后和侧轴的中点对齐
            space-between: 换行之后在侧轴上两端对齐
            space-around: 换行之后在侧轴上环绕对齐
            stretch: 以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴
            */
            /*align-content: flex-start;*/
            /*align-content: flex-end;*/
            /*align-content: center;*/
            /*align-content: space-between;*/
            /*align-content: space-around;*/

伸缩项的排序问题：

默认情况下每一个伸缩项都有一个order属性, 用于决定排序的先后顺序
            默认情况下所有伸缩项的order属性的取值都是0
            我们可以通过修改order属性的取值来实现伸缩项的排序
            order排序的规则: 从小到大的排序, 越小的显示在越前面, 越大的显示在越后面

伸缩项的扩充宽度

 /*
            在伸缩项中有一个flex-grow属性, 用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
            默认情况下flex-grow的取值是0, 表示我们设置的宽度是多少就按照多少来显示, 不进行任何的扩充
            注意点:
            只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效

            flex-grow缩小的公式
            1.利用伸缩容器宽度 - 所有伸缩项的宽度 = 剩余空间
              600 - 300 = 300
            2.利用剩余空间 / 所有需要扩充份数的总和 = 每一份的大小
              300 / (1 + 4 + 8) = 23.07
            3.利用当前伸缩项的宽度 + 需要的份数的宽度
              第一个伸缩项 = 100 + (1 * 23.07) = 123.07
              第二个伸缩项 = 100 + (4 * 23.07) = 192.28
              第三个伸缩项 = 100 + (8 * 23.07) = 284.56
            */

伸缩项的缩小比例问题

            /*
            在伸缩项中有一个flex-shrink属性, 用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
            默认情况下flex-shrink的取值是1, 表示当所有伸缩项宽度的总和大于伸缩容器宽度的时候等比缩小自己
            注意点:
            只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候flex-shrink这个属性才有效


            flex-shrink扩充的公式
            1.利用所有伸缩项的宽度总和 - 伸缩容器宽度 = 溢出的宽度
            900 - 600 = 300
            2.计算权重值
            利用每一个伸缩项需要的份数 * 当前伸缩项的宽度 然后再相加
            1 * 300 + 4 * 300 + 8 * 300 = 3900
            3.计算每个伸缩项需要缩小的范围
            溢出的宽度 * 当前伸缩项的宽度 * 当前伸缩项需要的份数 / 权重值
            300 * 300 * 1 / 3900 = 23.07
            第一个伸缩项宽度 = 300 - 23.07 = 276.9
            300 * 300 * 4 / 3900 = 92.3
            第二个伸缩项宽度 = 300 - 92.3 = 207.6
            */

伸缩项缩小的注意：

            /*
            1.如果没有指定flex-grow属性, 或者flex-grow:的值是0, 那么当前的伸缩项不会被扩充
            2.如果flex-shrink的值是0, 那么当前的伸缩项不会被缩小
            3. 注意点
            前面所写的注释都是说宽度扩充或者宽度缩小, 但是这种说法是不严谨的
            也有可能扩充和缩小的是高度, 到底是宽度还是高度是由主轴决定的, 扩充和缩小的是主轴方向上的值
            也就是说如果主轴是水平方向的, 那么扩充和缩小的就是宽度
            也就是说如果主轴是垂直方向的, 那么扩充和缩小的就是高度
            */
            flex-grow: 0;
            /*flex-shrink: 0;*/

设置宽度的问题

1. 在伸缩布局中可以通过flex-basis属性设置伸缩项的宽度，注意点: flex-basis 只有在伸缩布局中才有效。
2. 在伸缩布局中如果通过flex-basis设置了宽度, 那么再通过width设置宽度就会无效，也就是说flex-basis的优先级要高于width的优先级。
3. 在伸缩布局中如果同时通过flex-basis和width设置了宽度, 而且一个设置的是auto,一个设置的是具体的值, 那么会按照具体的值来显示

伸缩属性连写

flex: 扩充 缩小 宽度;
flex的默认值：
flex: 0 1 auto;