flexbox属性归纳

归纳一下flex的属性，以防自己忘记。
Flex 布局，可以简便、完整、响应式地实现各种页面布局。

flext盒子有两根轴，水平轴，垂直轴（方便自己记忆），flex盒子内的元素我们称为item。

容器有6个属性

flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

项目有6个属性

order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self

属性

box

  • flex-direction改变轴向（flex盒子内的item按照轴向，从轴头排到轴尾），有4个值。
  1. row:左至右（默认）。
  2. row-reverse:右至左。
  3. column:上至下（默认）。
  4. column-reverse:下至上。
  • flex-wrap:换行规则（item在盒子中按照轴向排列，默认单行排满会均匀缩小item并不会换行。）有3个值
  1. nowrap：不换行（默认）
  2. wrap：换行
  3. wrap-reverse：逆行换行。
  • flex-flow上面两个属性的简写形式，整合了轴向和换行规则。下面是默认值。
  • row nowrap:默认值，左至右，不换行。
  • 按照前面两个属性。
  • justify-content横轴对齐规则，有5个值
  1. flex-start:从轴头至轴尾对其
  2. flex-end:从轴尾至轴头对其
  3. center:居中
  4. space-between:两端对齐，中间均匀间隔
  5. space-around: 空隙平均分布item两侧。
  • align-content多排对齐。如果项目只有一根轴线，该属性不起作用。有6个值。
  1. flex-start：与交叉轴的起点对齐。
  2. flex-end：与交叉轴的终点对齐。
  3. center：与交叉轴的中点对齐。
  4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  6. stretch（默认值）：轴线占满整个交叉轴。
  • align-items：纵轴对齐规则。
  1. flex-start:从轴头至轴尾对其
  2. flex-end:从轴尾至轴头对其
  3. center:居中
  4. baseline:项目的第一行文字的基线对齐
  5. stretch:item未设置高度或者为auto，高度占整个容器。

items

  • order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。值为数字。
  • flex-grow：分配剩余空间，使元素放大。默认值为0。值为数字。1为1份数。剩余空间按照等分数分给配置此属性的元素。
  • flex-shrink：使溢出部分减少规则，使元素缩小。默认值为0。值为数字。1为1份数。剩余空间按照等分数分给配置此属性的元素。
  • flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  • flex:grow,shrink,basis的简写形式。默认值0 1 auto
  • 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
  • align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

参考阮一峰的文章，如果后面发现有缺少的属性或值，再补上。