css之flex布局？

1.什么是flex布局？

flex是Flexible Box的缩写，他的意思是“弹性布局”。每一个容器都能指定为flex布局。

.box{
display: flex;
}

仅仅只需要这一行就能使这个容器变成flex布局 

行内元素也可以使用Flex布局

.box{
display: inline-flex;
}

 但是当这个容器加了flex属性，那么他的子元素的float , clear, vertical-align属性都将失效。

容器的属性：

该容器有六大属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

1、flex-direction

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

row:默认值，从左向右排

row-reverse:从右向左排

column:从上向下排

column-reverse:从下向上排

2、flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse

nowarp:不换行

warp:主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。

warp-reverse:主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。

3、flex-flow

flex-flow: <flex-direction> <flex-wrap>;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4、justify-content

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

flex-start（默认）：与主轴的起点对齐。
flex-end：与主轴的终点对齐。
center：与主轴的中点对齐。
space-between：两端对齐主轴的起点与终点，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5、align-items

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

  flex-start：交叉轴的起点对齐。

  flex-end：交叉轴的终点对齐。

  center：交叉轴的中点对齐。

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

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

6、align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch

  flex-start：交叉轴的起点对齐。

  flex-end：交叉轴的终点对齐。

  center：交叉轴的中点对齐。

  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

  stretch（默认值）：主轴线占满整个交叉轴。