Flexbox布局

1.Flex容器属性：

  flex-direction（方向）

    可以决定Flex容器中主轴和纵轴的方向。当flex-direction的值为column时，垂直方向的轴就编程主轴，与其垂直的就是纵轴（水平方向的轴）。

  flex-wrap（包裹）

    用来决定Flex项目的宽度和超过Flex容器的宽度时，Flex项目换不换行排列。默认值：nowrap(不换行)。

  justify-content（横向对齐方式）

    控制主轴方向内容的宽度和Flex项目之间的间隙。

    值：flex-start,flex-end,center,space-between,space-around,stretch,space-evenly

  align-item（纵向对齐方式）

    控制纵轴方向的行为。

    值：lex-start,flex-end,center,stretch,baseline

  flex-flow（流）

    flex-direction flex-wrap。

  Flex容器有n个Flex项目时，默认情况下，这些Flex项目从左向右排列，而且时一行排列，哪怕是超出了Flex容器的宽度。就是因为flex-direction和flex-wrap的默认值分别是row和nowrap。

  css中direction的值也可以设置排版方向。

  左向右排列：direction:ltr;或flex-direction:row;

  右向左排列：direction:rtl或flex-direction:row-reverse。

   display可以取值为flex和inline-flex。

2.Flex项目属性：

  flex-basis

    类似于min-width。它将根据内部内容扩展Flex项目的大小。

  flex-grow

    应用到一个Flex项目时，它将相对于同一行上所有其他Flex项目的大小的总和进行缩放。该值将根据指定的值自动调整。

  flex-shrink

    和flex-grow刚好相反

  flex

    是flex-grow、flex-shrink、和flex-basis的简写。

  order

    可以用来改变Flex项目的排列顺序。是一个『相对值』,order越大，排名越靠后。

  justify-items

    用于Flex项目上（TODO）。

3.什么情况下不建议使用flexbox布局？

    *整体页面布局

    *完全支持旧浏览器的网站