学习Flex弹性布局学习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弹性布局】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 的值。