Flex布局

容器属性(6个)

• flex-direction属性

  取值：row(默认) | row-reverse | column | column-reverse

• flex-wrap属性

  取值：nowrap(默认) | wrap | wrap-reverse

• flex-flow属性

  flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

• justify-content属性

  取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly

• align-items属性

  flex-start | flex-end | center | baseline | stretch(默认)

• align-content属性

  取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)

项目属性(6个)

• order

  取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

• flex-grow

  取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

• flex-shrink

  取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

• flex-basis

  取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

• flex

  取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

• align-self

  取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。