flex布局

容器属性

• flex-direction
  主轴的方向
  flex-direction: row | row-reverse | column | column-reverse;

• flex-wrap
  项目排列时候的换行行为
  flex-wrap: nowrap | wrap | wrap-reverse(换行，第一行在下方);

• flex-flow
  flex-direction flex-wrap 的缩写
  flex-flow: <’flex-direction’> || <’flex-wrap’>;

• justify-content
  项目在主轴(默认X)上的对齐方式
  justify-content: flex-start | flex-end | center | space-between | space-around;

• align-items
  项目在交叉轴(默认Y)上如何对齐
  align-items: flex-start | flex-end | center | baseline | stretch;

• align-content
  多根轴线的对齐方式
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目属性

• order
  项目的排列顺序
  order: ;

• flex-grow
  项目的放大比例
  flex-grow: ;

• flex-shrink
  项目的缩小比例
  flex-grow: ;

• flex-basis
  在分配多余空间之前，项目占据的主轴空间
  flex-basis: | auto;

• flex
  flex-grow flex-shrink flex-basis 缩写
  flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]

• align-self
  允许单个项目有与其他项目不一样的对齐方式
  align-self: auto | flex-start | flex-end | center | baseline | stretch;