flex布局

1、开启了flex布局的元素称为flex container
2、flex container里面的直接子元素称为flex items
3、设置display属性为flex或者inline-flex可以成为flex container

• flex：flex container以块级元素形式存在
• inline-flex：flex container以行级元素形式存在

1、应用在flex container上的CSS属性

• flex-flow

  flex-flow是flex-direction || flex-wrap的简写

  flex-flow: column wrap;
  等价于
  flex-direction: column;
  flex-wrap: wrap;
  

  flex-flow: row-reverse;
  等价于
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  

  flex-flow: wrap;
  等价于
  flex-direction: row;
  flex-wrap: wrap;
  

• flex-direction

  flex items默认都是沿着main axis（主轴）从main start开始往main end方向排布
  flex-direction决定main axis的方向，有4个取值
  row（默认值）、row-reverse、column、column-reverse

• flex-wrap

  flex-wrap决定了flex container是单行还是多行

  • nowrap（默认）：单行
  • wrap：多行
  • wrap-reverse：多行（对比wrap，cross start与cross end相反）

• justify-content

  justify-content决定了flex items在main axis上的对齐方式

  • flex-start（默认值）：与main start对齐

  • flex-end：与main end对齐

  • center：居中对齐

  • space-between
    flex items之间的距离相等
    与main start、main end两端对齐

  • space-around
    flex items之间的距离相等
    flex items与main start、main end之间的距离是flex items之间的距离的一半

  • space-evenly
    flex items之间的距离相等
    flex items与main start、main end之间的距离等于flex items之间的距离
    但是，该属性存在兼容性问题，因此可以利用space-between来实现替代效果

    .container {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-between;
            /*justify-content: space-evenly;*/
      }
      .container:before, 
      .container:after {
              content: '';
              display: block;
      }
  

• align-items

  align-items决定了flex items在cross axis上的对齐方式

  • stretch（默认值）：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container

  • flex-start：与cross start对齐

  • flex-end：与cross end对齐

  • center：居中对齐

  • baseline：与基准线对齐

• align-content

  align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似

  • align-content（默认值）`：与align-items的stretch相似

  • flex-start：与cross start对齐

  • center：与cross居中

  • flex-end：与cross end对齐

  • space-between
    flex items之间的距离相等
    与cross start、cross end两端对齐

  • space-around
    flex items之间的距离相等
    flex items与cross start、cross end之间的距离是flex items之间的距离的一半

  • space-evenly
    flex items之间的距离相等
    flex items与cross start、cross end之间的距离等于flex items之间的距离

2、应用在flex items上的CSS属性

• flex

  flex是flex-grow flex-shrink? || flex-basis
  默认值是 0 1 auto
  none: 0 0 auto

• flex-grow

  决定了flex items如何扩展

  • 可以设置任意非负数字（0、正小数、正整数），默认值是0
  • 当flex container在main axis方向上有剩余size时，flex-grow属性才有效
  • flex-items扩展后的最终size不能超过max-width || max-height

  1、如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为flex container的剩余size * flex-grow / sum

  2、如果所有flex items的flex-grow总和sum不超过1，每个flex item扩展的size为flex container的剩余size * flex-grow

• flex-basis

  用来设置flex items在main axis方向上的base size
  auto（默认值）、content：取决于内容本身的size

  决定flex items最终base size的因素，优先级从高到低

  • max-width / max-height / min-width / min-height
  • flex-basis
  • width / height
  • 内容本身的size

• flex-shrink

  决定了flex items如何收缩

  • 可以设置任意非负数字（0、正小数、正整数），默认值是1
  • 当flex items在main axis方向上超过了flex container的size，flex-shrink属性才有效
  • flex-shrink收缩后的最终size不能小于min-width || min-height

  每个flex item收缩的size为flex items超出flex container的size * 收缩比例 / 所有flex items的收缩比例之和

  • 收缩比例 = flex-shrink* flex item的base size

  • base size就是flex item放入flex container之前的size

• order

  决定了flex items的排布顺序

  • 可以设置任意整数（负整数、0、正整数），值越小就越排在前面
  • 默认值是0

• align-self

  flex items可以通过align-self覆盖flex container设置的align-items

  • auto（默认值）：遵从flex container的align-items设置
  • stretch、flex-start、flex-end、center、baseline，效果与align-items一致