flex布局

1. flex 是什么？

• flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思
• 2.Flex布局

• flex-direction / flex-wrap / flex-flow / justify-content / align-items / align-content

  1.水平（主轴上）对齐方式：

  justify-content：flex-start | flex-end | center | space-between | space-around;

  flex-start（默认值）：左对齐

• flex-end：右对齐

  center： 居中

  space-between：两端对齐，子元素间隔相等。

  space-around：子元素两侧的间隔相等。

  2.十字交叉轴上对齐方式

  align-items：flex-start | flex-end | center | baseline | stretch;

  flex-start：上对齐。

  flex-end：下对齐。

  center：交叉轴对齐。

  baseline: 第一行文字的基线对齐。

  stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器。

  3.项目排列方向

  flex-direction：row | row-reverse | column | column-reverse;

  row（默认值）：从左1/2/3/...。

  row-reverse：从左../3/2/1。

  column：从上1/2/3/...。

  column-reverse：从上../3/2/1。

  4.换行方式

  flex-wrap：nowrap（不换行） | wrap（向下换） | wrap-reverse（向上换）;

  2）Flex布局子元素属性

  order/flex-grow/flex-shrink/flex-basis/flex/align-self

  5.flex属性

  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。