2021-04-05

flex弹性盒子容器属性

flex-direction容器属性
flex-direction属性决定了主轴的方向（即项目排序方向）
属性值：
row row-reverse column column-revers

• row（默认值）：主轴为水平方向，项目从左到右依次排序：1234
• row-reverse：主轴为水平方向，项目从右到左依次排序：4321
• column: 主轴方向改变为垂直方向，y轴为水平方向 从上到下：1234
• column-reverse：主轴为垂直方向，从下到上4321

align-items容器属性
align-items属性定义项目在交叉轴如何对齐，默认交叉轴从上到下
属性值：

• flex-start：交叉轴的起点对齐

• flex-end：交叉轴的终点对齐

• center：交叉轴中点对齐

• baseline:项目的第一行文字的基线对齐

• stretch（默认值）：如果项目没有设置高度或设置为auto，将占满容器整个高度
  order 排序用法
  每个项目order默认为0，排序越小越靠前，可以为负数
  排序越大越靠后。
  align-self 容器属性
  align-self定义了flex子项目单独在y轴方向上对齐方式
  属性值

• flex-start子项目单独右上角对对齐，容器开头

• stretch子项目拉伸，高度占满

• center子项目位于容器y轴中心

• flex-end子项目位于y轴结尾

• baseline子项目位于容器基线上对齐

• auto默认值，继承了它父元素align-item的值，如果没有父元素则为stretch
  flex-wrap容器属性
  默认情况下，项目都排在一条线上（轴线）
  flex-wrap属性定义，如果在一条轴线排不下，如何换行。
  属性值

• nowrap（默认）：不换行

• wrap：换行，第一行在上方

• wrap-reverse：换行，第一行在下方
  align-content容器属性
  align-content y轴上有剩余空间时，类似与justify-content在主轴内各个项目对齐方式，

• flex-start：与交叉轴的起点对齐

• flex-end ：与交叉轴的终点对齐

• center：与交叉轴中点对齐

• space-between:与交叉轴2端对齐，轴线之间间隔平均分布

• space-around行头和行尾距离为项目之间的距离的一半，且平均分布

• space-evenly：行头和行尾的距离和项目之间的距离相等
  当只有一个弹性项目时，此属性不起作用