伸缩容器：在哪个元素里面设置了display: flex;那么这个元素就是伸缩容器
伸缩项：伸缩容器中的子元素就是伸缩项
主轴：默认情况下，水平方向上的那根轴就是主轴
主轴起点：默认情况下，主轴的起点在伸缩容器的最左边
- 默认情况下，伸缩项都是从主轴的起点开始排版的
主轴的终点：默认情况下，主轴的终点在伸缩容器的最右边
侧轴：默认情况下，垂直方向上的那根轴我们称之为侧轴
侧轴起点：默认情况下，侧轴的起点在伸缩容器的最顶部
侧轴终点：默认情况下，侧轴的终点在伸缩容器的最底部
- flex-direction: 用于修改主轴起点的位置
- row:起点在伸缩容器的最左边, 终点在伸缩容器的最右边. 从左至右的排版, 默认的取值
- row-reverse: 起点在伸缩容器的最右边, 终点在伸缩容器的最左边, 从右至左的排版
- column: 起点在伸缩容器的最顶部, 终点在伸缩容器的最底部, 从上至下的排版
- column-reverse: 起点在伸缩容器的最底部, 终点在伸缩容器的最顶部, 从下至上的排版
注意点: 在伸缩布局中主轴和侧轴永远都是十字交叉的, 只要主轴的方向发生了变化, 侧轴也会发生变化
justify-content:属性，设置主轴伸缩项的对齐方式
justify-content: flex-start;(设置伸缩项向主轴的起点对齐)
justify-content: flex-end;(设置伸缩项向主轴的终点对齐)
justify-content: center;(设置伸缩项向主轴的中点对齐)
justify-content: space-between;(设置伸缩项向主轴的两端对齐)
justify-content: space-around;(设置伸缩项向主轴环绕对齐)
flex-direction: row; 主轴起点的默认值(设置主轴的起点)
justify-content: flex-start; 主轴上伸缩项对齐的默认值
注意点: 在设置对齐方式的时候一定要理解两步操作
- 1.按照主轴起点对伸缩项进行排版
- 2.按照指定的对齐方式对齐排版好的伸缩项
align-items:属性，设置侧轴的对齐方式
align-items: flex-start;(设置伸缩项向侧轴的起点对齐)
align-items: flex-end;(设置伸缩项向侧轴的终点对齐)
align-items: center;(设置伸缩项向侧轴的中点对齐)
align-items: baseline;(让所有伸缩项中的基线在一条直线上对齐)
align-items: stretch;(拉伸对齐/等高对齐) 让所有的伸缩项的高度变为侧轴的高度
注意点：
- 侧轴对比主轴来说没有两端对齐(space-between)和环绕对齐(space-around)
- 如果需要设置为拉伸对齐, 那么伸缩项不能设置高度
- 如果伸缩项设置了高度, 那么拉伸对齐就会失效
侧轴对齐方式二
align-self:属性，设置侧轴某一个伸缩项的对齐方式
- 如果在伸缩容器中通过 align-items: 来控制伸缩项的对齐方式, 是一次性控制所有伸缩项的对齐方式
- 如果想单独的控制某一个伸缩项在侧轴上的对齐方式, 那么需要将控制对齐方式的属性写到伸缩项中
- align-items: 写到伸缩容器中 / 控制所有伸缩项
- align-self: 写到伸缩项中 / 控制编写对应代码的那个伸缩项
- align-self: 的取值和align-items:的取值是一样的, 只是控制的范围和书写的位置不同而已
伸缩布局中换行问题和换行对齐方式
flex-wrap:属性，设置伸缩容器宽度不够时，伸缩项是否需要换行
默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项
flex-wrap:属性取值
flex-wrap: nowrap;(默认取值)不换行
flex-wrap: wrap;换行
flex-wrap: wrap-reverse;放不下就换行 , 以行为单位进行反转
在伸缩容器中有一个叫做align-content的属性, 是专门用于设置换行之后的对齐方式的
注意点: 只有伸缩项发生了换行这个属性才有效
align-content的属性取值
align-content: flex-start;换行之后和侧轴的起点对齐, 一行接一行
align-content: flex-end;换行之后和侧轴的终点对齐, 将所有换行之后的内容当做一个整体来操作
align-content: center;换行之后和侧轴的中点对齐
align-content: space-between;换行之后在侧轴上两端对齐
align-content: space-around;换行之后在侧轴上环绕对齐
align-content: stretch;（默认取值）以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴
伸缩项的排序问题
- 默认情况下每一个伸缩项都有一个order属性, 用于决定排序的先后顺序
- 默认情况下所有伸缩项的order属性的取值都是0
- 我们可以通过修改order属性的取值来实现伸缩项的排序
- order排序的规则: 从小到大的排序, 越小的显示在越前面, 越大的显示在越后面
伸缩项的扩充问题
伸缩项扩充属性：flex-grow:0（默认值）
在伸缩项中有一个flex-grow属性, 用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
默认情况下flex-grow的取值是0, 表示我们设置的宽度是多少就按照多少来显示, 不进行任何的扩充
注意点
- 只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效
flex-grow扩充的公式
- 1.利用伸缩容器宽度 - 所有伸缩项的宽度 = 剩余空间
- 2.利用剩余空间 / 所有需要扩充份数的总和 = 每一份的大小
- 3.利用当前伸缩项的宽度 + 需要的份数的宽度
伸缩项的缩小问题
伸缩项缩小属性 flex-shrink:1(默认值)
在伸缩项中有一个flex-shrink属性, 用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
默认情况下flex-shrink的取值是1, 表示当所有伸缩项宽度的总和大于伸缩容器宽度的时候等比缩小自己
注意点:
- 只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候flex-shrink这个属性才有效
flex-shrink缩小的公式
1.利用所有伸缩项的宽度总和 - 伸缩容器宽度 = 溢出的宽度
900 - 600 = 3002.计算权重值
利用每一个伸缩项需要的份数 * 当前伸缩项的宽度 然后再相加
1 * 300 + 4 * 300 + 8 * 300 = 39003.计算每个伸缩项需要缩小的范围
溢出的宽度 * 当前伸缩项的宽度 * 当前伸缩项需要的份数 / 权重值
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, 那么当前的伸缩项不会被缩小
- 前面所写的注释都是说宽度扩充或者宽度缩小, 但是这种说法是不严谨的
- 也有可能扩充和缩小的是高度, 到底是宽度还是高度是由主轴决定的, 扩充和缩小的是主轴方向上的值
- 也就是说如果主轴是水平方向的, 那么扩充和缩小的就是宽度
- 也就是说如果主轴是垂直方向的, 那么扩充和缩小的就是高度
伸缩项宽度设置
- 1.在伸缩布局中可以通过flex-basis属性设置伸缩项的宽度
注意点: flex-basis 只有在伸缩布局中才有效
- 2.在伸缩布局中如果通过flex-basis设置了宽度, 那么再通过width设置宽度就会无效
也就是说flex-basis的优先级要高于width的优先级
- 3.在伸缩布局中如果同时通过flex-basis和width设置了宽度, 而且一个设置的是auto,一个设置的是具体的值, 那么会按照具体的值来显示
flex属性连写
flex: 扩充 缩小 宽度;
flex默认值
flex: 0 1 auto;
圣杯布局
1.什么是圣杯布局和双飞翼布局
- 两者实现的功能都一样, 都是用于实现两侧的宽度不变, 中间的宽度自适应的三栏布局的
2.圣杯布局的步骤
- 2.1搞一个容器, 里面放三个盒子
- 2.2设置两侧盒子的宽度(固定)
- 2.3设置中间盒子的宽度等于容器的宽度(100%)
- 2.4设置容器的padding等于两侧盒子的宽度
- 2.5让三个盒子都在同一个方向上浮动
- 2.6设置左边盒子的margin-left=-100%
- 2.7通过定位调整左边的盒子, 让左边的盒子不要盖住中间的区域
- 2.8设置右边盒子的margin-left=-自身的宽度
- 2.9通过定位调整右边的盒子, 让右边的盒子不要盖住中间的区域
- 3.0给容器设置一个最小的宽度, 防止缩小后变形
双飞翼布局
1.双飞翼布局的实现步骤
- 1.1搞一个容器, 里面放三个盒子
- 1.2设置两侧盒子的宽度(固定)
- 1.3设置中间盒子的宽度等于容器的宽度(100%)
- 1.4让三个盒子都在同一个方向上浮动
- 1.5给中间的盒子添加一个子盒子
- 1.6给子盒子设置margin 0 两侧盒子的宽度
- 由于是给子盒子设置margin,所以不会对父盒子排版产生任何影响
- 1.7设置左边盒子的margin-left=-100%
- 1.8设置右边盒子的margin-left=-自身的宽度
