Flex布局的简单总结

主要是总结阮一峰老师的教程，加深自己的印象。

基本概念

• flex容器：采用flex布局的元素称为flex容器。
• flex项目：flex容器的所有子元素都称为容器成员，即flex项目，简称项目。

容器默认有两根轴，水平的主轴和垂直的交叉轴。

容器的属性

• flex-direction：

  决定主轴的方向

  • row(默认值): 从左到右
  • row-reverse：从右到左
  • column：从上到下
  • column-reverse：从下到上

• flex-wrap：

  定义如果一行轴线排不下，如何换行

  • nowrap(默认): 不换行
  • wrap：换行，第一行在上方
  • wrap-reverse: 换行，第一行在下方

• flex-flow

  flex-direction和flex-wrap属性的简写形式

  • <flex-direction> || <flex-wrap>

• justify-content:

  定义了项目在主轴上的对齐方式

  • flex-start(默认): 左对齐(主轴的起点)
  • flex-end: 右对齐(主轴的终点)
  • center: 居中
  • space-between: 两端对齐，项目之间间隔相等
  • space-around: 每个项目两侧的间隔相等。即项目之间的间隔比项目与边框的间隔大一倍。

• align-items：

  定义项目在交叉轴上如何对齐

  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：居中
  • baseline：项目的第一行文字的基线对齐
  • stretch(默认): 如果项目未设置高度或者设置为auto，将占满整个容器的高度

• align-content

  定义了多跟轴线的对齐方式。如果项目只有一个轴线，则该属性不起作用。

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

注意：align-content只对多行的flex容器起作用。

align-content&align-items

项目的属性

• order

  定义项目的排列顺序。数值越小，排列越靠前，默认为0

• flex-grow

  定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• flex-shrink

  定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

• flex-basis

  定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间，默认为auto,即项目本来的大小。

  可以设为跟width或height属性一样的值

• flex

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

  none | [ <flex-grow> <flex-shrink> ? || <flex-basis>]

  有两个快捷键：

  • auto(1 1 auto)
  • none(0 0 auto)

• align-self

  允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch