简述flex css

开局一张图

两条轴，在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)

两条距离，在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

我们理解从这两个角度切入: flex container(容器)和flex item(项目)

先说flex container(容器)

.container {
    display: flex | inline-flex;  //类比块元素和行内元素
}

flex container的属性

• flex-direction 决定主轴的方向

  .container {
      flex-direction: row | row-reverse | column | column-reverse;
  }

  • row 主轴为水平方向，起点在左端
  • row-reverse 主轴为水平方向，起点在右端
  • column 主轴为垂直方向，起点在上沿
  • column-reverse 主轴为垂直方向，起点在下沿

• flex-wrap 决定容器内项目是否可换行

  .container {
      flex-wrap: nowrap | wrap | wrap-reverse;
  }

  • nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
  • wrap 项目主轴总尺寸超出容器时换行，第一行在上方
  • wrap-reverse 换行，第一行在下方

• flex-flow flex-direction 和 flex-wrap 的简写形式

  .container {
      flex-flow: <flex-direction> || <flex-wrap>;
  }

  默认值为: row nowrap，感觉老老实实分开写就好了，毕竟理解根本才是关键。

• justify-content 定义了项目在主轴的对齐方式

  .container {
      justify-content: flex-start | flex-end | center | space-between | space-around;
  }

  • flex-start 左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
  • space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

• align-items

  .container {
      align-items: flex-start | flex-end | center | baseline | stretch;
  }

• align-content 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

  这个这样理解：

  当你 flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。

  当你 flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了。

  .container {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  }

再说flex item(项目)

• order 定义项目在容器中的排列顺序

  数值越小，排列越靠前，默认值为 0

  .item {
      order: <integer>;
  }

• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间

  .item {
      flex-basis: <length> | auto;
  }

• flex-grow 定义项目的放大比例

  默认值为 0，即如果存在剩余空间，也不放大。

  .item {
      flex-grow: <number>;
  }

  当所有的项目都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用了。

  如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。(如果有的话)

  如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

  当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了，且 flex-wrap：nowrap 时，此时 flex-grow 则不起作用了，这时候就需要接下来的这个属性。

• flex-shrink 定义了项目的缩小比例

  默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。

  .item {
      flex-shrink: <number>;
  }

  这里可以看出，虽然每个项目都设置了宽度为 50px，但是由于自身容器宽度只有 200px，这时候每个项目会被同比例进行缩小，因为默认值为 1。

  同理可得：

  如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。

  如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

• flex flex-grow, flex-shrink 和 flex-basis的简写

  flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。

  .item{
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  } 

• align-self 允许单个项目有与其他项目不一样的对齐方式

  单个项目覆盖 align-items 定义的属性

  默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

  .item {
       align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }

结语

希望通过简短的介绍能够给你flex布局一个清晰的认识。