伸缩布局flex笔记

在伸缩布局时，需要在父盒子中设置display:flex
flex的几条属性

• flex-direction：这条属性用来设置flex布局中主轴的方向，取值有：
  - row(默认 从左往右)
  - row-reverse从右往左
  - column(从上往下)
  - column-reverse(从下往上) 当设置display之后，默认主轴方向为row 即从左往右

• justify-content：这条属性用来设置水平方向上flex子项对齐的方式，取值有：
  - flex-start：设置为主轴开始位置对齐。
  - flex-end：设置为主轴结束位置对齐。
  - center：设置为主轴中间对齐。
  - space-between：两端对齐。
  - space-around：当行两侧需要留白时，可以使用。

• align-item：这条属性用来设置侧轴flex子项对齐的方式，取值有：
  - stretch：当子项没有设置高度或者高度为auto的时候，该属性起作用，将flex子项高度设置为行高度，当只有一行时，子项高度会被设置为容器高度。
  - flex-start：侧轴开始位置对齐。
  - flex-end：侧轴结束位置对齐。
  - center：侧轴中间对齐。
  - baseline：基线对齐。

• flex-wrap：设置是否换行，取值有：
  - nowrap：不换行。
  - wrap：换行。
  - wrap-reverse：反向换行。

• align-self：该属性用来设置某个子项的对齐方式，取值有：
  - auto：
  - flex-start：侧轴起始位置对齐。
  - flex-end：侧轴结束位置对齐。
  - center：中间对齐。
  - baseline：基线对齐。
  - stretch：拉伸。

• align-content：该属性只作用于多行的情况下，设置多行的对齐方式，取值有
  - stretch
  - flex-start
  - flex-end
  - center
  - space-between
  - space-around