CSS3--伸缩布局

主轴

• 在伸缩布局中，默认情况下水平方向是主轴，主轴的起点在在伸缩容器的最左边，所有的伸缩项都是从主轴的起点开始排版的
• 但是我们也可以通过属性来修改主轴的起点和位置

---

flex-direction

• 作用：用于修改主轴起点的位置
• 语法：flex-direction: row|row-reverse|column|column-reverse;
• 取值：
  • row：默认的取值
  • row-reverse: 从右至左的排版
  • column: 从上至下的排版
  • column-reverse: 从下至上的排版

---

justify-content

• 作用：主轴对齐方式
• 语法：justify-content：flex-start | flex-end | center | space-between | space-evenly；
• 取值：
  • flex-start：主轴起点对齐（默认值）
  • flex-end：主轴终点对齐
  • center：主轴中点对齐
  • space-between：主轴两端对齐
  • space-around：主轴环绕
  • space-evenly：主轴平均分布

---

侧轴

• 和主轴呈十字交叉

align-items

• 作用：侧轴对齐方式
• 语法：align-items: stretch | flex-start | flex-end | center | baseline;
• 取值：
  • flex-start：起点对齐
  • flex-end：终点对齐
  • center：居中对齐
  • baseline：基线对齐
  • stretch：拉伸对齐/等高对齐 让所有的伸缩项的高度变为侧轴的高度(默认值)
• 注意点：
  • 如果需要设置为拉伸对齐, 那么伸缩项不能设置高度（否则无效）

---

align-self

• 作用：伸缩项对齐方式
• 语法：和侧轴对齐一样
• 取值：和侧轴对齐一样
• 注意点：
  • align-items是控制伸缩容器里所有的伸缩项,写在伸缩容器中
  • align-self是控制单个伸缩项,写在伸缩项中

---

换行和对齐

• 默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项
  在伸缩容器中有一个叫做flex-wrap属性, 专门用于控制放不下是否需要换行的

flex-wrap

• 作用：是否换行
• 语法：flex-wrap: nowrap;
• 取值：
  • nowrap 默认取值
  • wrap 超出部分换行
  • wrap-reverse: 超出部分换行 , 以行为单位进行反转

align-content

• 作用：专门用于设置换行之后的对齐方式的
• 语法：align-content: stretch | flex-start | flex-end | center | space-between | space-around;
• 取值：
  • stretch 以行为单位进行拉伸, 拉伸的部分以空白填充（默认值）
  • flex-start：换行后和侧轴起点对齐
  • flex-end：换行后和侧轴终点对齐
  • center： 换行之后和侧轴的中点对齐
  • space-between：换行之后在侧轴上两端对齐
  • space-around：换行之后在侧轴上环绕对齐
• 注意点：
  • 只有伸缩项发生了换行这个属性才有效

---

伸缩项

• 伸缩容器中的元素为伸缩项

order

• 作用：默认情况下每一个伸缩项都有一个order属性, 用于决定排序的先后顺序
• 语法：order：0；
• 取值：正负数
• 排序规则：从小到大的排序, 越小的显示在越前面, 越大的显示在越后面

flex-grow

• 作用：用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己
• 语法：flex-grow：0；
• 取值：数值；
• 计算公式：
  1.利用伸缩容器宽度 - 所有伸缩项的宽度 = 剩余空间
  2.利用剩余空间 / 所有需要扩充份数的总和 = 每一份的大小
  3.利用当前伸缩项的宽度 + 需要的份数的宽度
• 注意点：只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效

flex-shrink

• 作用：用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己

• 语法： flex-shrink：1；

• 取值：数值；

• 计算公式：

• 注意点：只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候flex-shrink这个属性才有效

---

• 注意点：扩充和缩小是按照主轴方向进行的

---

flex-basis

• 作用：伸缩项宽度设置
• 语法：flex-basis：0；
• 取值：
  • 数值
  • auto
• 注意点：flex-basis 只有在伸缩布局中才有效
• 注意点：
  1.利用所有伸缩项的宽度总和 - 伸缩容器宽度 = 溢出的宽度
  2.利用每一个伸缩项需要的份数 * 当前伸缩项的宽度 然后再相加
  3.溢出的宽度 * 当前伸缩项的宽度 * 当前伸缩项需要的份数 / 权重值

---

flex

• 作用：连写flex-grow flex-shrink flex-basis
• 语法：flex:flex-grow flex-shrink flex-basis;
• 取值：flex: 0 1 auto;

---