flex 我所理解不够深刻的内容

1.align-items属性   父元素

align-items属性定义项目在交叉轴上如何对齐。

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

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

2.align-content属性    父元素

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

 

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

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

 

3.order属性  子元素

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

.item {
  order: <integer>;
}

 

4.align-self属性  子元素

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

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

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