学习Flex弹性布局

认识Flex布局

• Flex布局（Flexible布局，即弹性布局）是目前web开发中使用最多的布局方案。

• 两个重要的概念：

  • 开启了Flex布局的元素叫 flex container,

  • flex container里面的直接子元素叫做 flex item

• 设置 display 属性为 flex 或者 inline-flex 可以成为flex container：

  • flex：flex containner以块级元素的形式存在，

  • inline-flex：flex container以行内元素的形式存在

---

flex布局模型

如下图所示，成为flex container后，默认从左到右是主轴（main axis），从上到下是交叉轴（cross axis），主轴的长度叫 “main size” 主轴的起点叫 “main start”，终点叫 “main end”，同理，交叉轴的长度叫 “cross size” 交叉轴的起点叫 “cross start”，终点叫 “cross end”。

---

flex相关的属性

• 与 flex container 相关的属性

  1. flex-direction：
     （i） flex items默认都是沿着main axis（主轴）从main start开始往main end方向排布
     （ii）flex-direction决定了main axis的方向，共四个取值可能：row（默认值，从左到右）；row-reverse（从右到左）；column（从上到下）；column-reverse（从下到上）。

  2. justify-content：
     
     justify-content决定了flex items在main axis（主轴）方向上的对齐方式，共有六种可能取值：
     a. flex-start（默认值，与main start对齐）；
     b. flex-end（与main end对齐）；
     c. center（居中对齐）；
     d. space-between（flex item之间距离相等，与main start及main end两端对齐）；
     e. space-evenly（flex item之间的距离相等，flex items与main start、main end之间的距离等于flex item之间的距离）；
     f. space-around（flex item之间的距离相等，flex items与main start、main end之间的距离是flex item之间的距离的一半）。

  3. align-items:
     
     align-items决定了flex items 在 cross axis（交叉轴）方向上的对齐方式，共有六种可能取值：
     a. normal（在弹性布局中，其效果与stretch一样）；
     b. strech （当flex items在 cross axis交叉轴方向的size为auto时，会自动拉伸至flex container的宽度）；
     c. flex-start（与cross start对齐）；
     d. flex-end（与cross end对齐）；
     e. center（居中对齐）；
     f. baseline（与基准线对齐）。

  4. flex-wrap：
     
     flex-wrap决定了flex container是单行还是多行：nowrap（默认值，单行，如果flex items总长度超出flex container的长度就会压缩flex item的长度以适应flex container的长度）；wrap（多行，如果超出flex container的长度，就会自动换行展示）；wrap-reverse（多行，对比wrap，cross start与cross end相反）。

  5. flex-flow：
     flex-flow 是 flex-direction && flex-wrap的简写，顺序任意，可以省略其中一个的值。

  6. align-content：
     align-content决定了多行flex items 在cross axis上的对齐方式，用法与justify-content类似，共七种取值可能：
     a. stretch（默认值，与align-items的stretch类似，当size为auto会自动拉伸item长度）
     a. flex-start（与cross start对齐）；
     b. flex-end（与cross end对齐）；
     c. center（居中对齐）；
     d. space-between（flex item之间距离相等，与cross start及cross end两端对齐）；
     e. space-evenly（flex item之间的距离相等，flex items与cross start、cross end之间的距离等于flex item之间的距离）；
     f. space-around（flex item之间的距离相等，flex items与cross start、cross end之间的距离是flex item之间的距离的一半）。

• 与 flex item 相关的属性
  1. order：
     order决定了flex item的排布顺序，默认值为0，可以设置为任意整数（正整数、负整数、0），值越小，flex item排在越前面。
  2. align-self：
     flex item可以通过设置 align-self 覆盖 flex container设置的 align-items。取值为auto（默认值，遵从 flex container 的 align-items 设置）；或其他 stretch、flex-start、flex-end、center、baseline，效果和align-items一致。
  3. flex-grow：
     flex-grow 决定了 flex items 如何扩展。
     a. 可以设置任意非负数字（正小数、正整数、0），默认值为0；
     b. 当flex container 在main axis方向上有剩余size时，flex-grow属性才会有效;
     c. 如果所有 flex items 的flex-grow总和sum超过1，每个flex item 扩展的size为 flex container剩余的size*（flex-grow/sum）；
     d. 如果所有flex items的flex-grow总和不超过1，每个flex item扩展的size为flex container的剩余size*flex-grow;
     e. flex items 扩展后的最终size不能超过max-width\max-height。
  4. flex-shrink：
     flex-shrink决定了flex items如何收缩
     a. 可以设置任意非负数字（正小数、正整数、0），默认值为1；
     b. 当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会有效;
     c. 如果所有 flex items 的flex-shrink总和sum超过1，每个flex item 收缩的size为 flex items超出 flex container的size*（flex-shrink/sum），最终的长度/宽度为该flex item减去计算出来的收缩的size；
     d. 如果所有flex items的flex-shrink总和不超过1，每个flex item收缩的size为flex items超出 flex container的size*flex-shrink，最终的长度/宽度为该flex item原来的size减去计算出来的收缩size；
     e. flex items 收缩后的最终size不能小于min-width\min-height。
  5. flex-basis：
     a. flex-basis 用来设置flex items在main axis 方向上的base size（base size 就是flex item 放入flex container之前的size），可取值为 auto（默认值）、具体的宽度数值（如：100px）
     b. 决定flex items最终base size的因素，从优先级高到低为：
     max-width\max-height\min-width\min-height =>
     flex-basis => width\height => 内容本身的size
  6. flex：
     flex 是 flex-grow && flex-shrink && flex-basis的简写，flex属性可以指定1个、2个或3个值。
     a. 单值语法：值必须是以下其中之一：一个无单位数，它会被当作 flex-grow 的值；一个有效的宽度值，它会被当作 flex-basis 的值；关键字none、auto或 initial；
     b. 双值语法：第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值；第二个值必须书以下之一：一个无单位数，它会被当作 flex-shrink的值；一个有效的宽度值，它会被当作 flex-basis 的值。
     c. 三值语法：第一个值必须是一个无单位数，它会被当作 flex-grow 的值；第二个值必须为一个无单位数，它会被当作 flex-shrink 的值；第三个值必须是一个有效的宽度值，它会被当作 flex-basis 的值。