关于CSS3中Flex布局的认识_flex-wrap: wrap;

一、Flex 布局是什么？

1、Flex布局是W3C于2009年提出的一种弹性布局，可简便、完整、响应式地实现各种页面布局。现在市场上的所有浏览器都支持Flex布局。

2、Flex是flexible box的缩写，是“弹性布局”，用来为盒状模型提供最大的灵活性。

3、任何一个容器都可指定为Flex布局

         div{ display:flex;}

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

         div{display:inline-flex;}

     webkit内核的浏览器，必须加上-webkit前缀

         div{display:-webkit-flex; /*Safari*/  display:flex;}

4、设为flex布局后，子元素设置的float 、clear、vertical-align属性将失效。

二、Flex 基本概念

采用flex布局的元素，称为flex容器，简称为“容器”。他的所有子元素自动成为容器的成员，成为flex项目（flex item），简称“项目”。

Flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，主轴的结束位置叫做main end；

交叉轴的开始位置叫做cross start，交叉轴的结束位置叫做cross end。

默认沿着主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、Flex容器的属性

1、flex-direction 属性表示容器内元素的排列方向（默认为横向排列）

flex-direction:row;                             沿水平(主轴)方向从左到右

flex-direction:row-reverse;              沿水平(主轴)方向从右向左

flex-direction:column；                   沿垂直(交叉轴)方向从上向下

flex-direction:column-reverse;       沿垂直(交叉轴)方向从下向上

2、flex-wrap属性表示容器内元素的换行/拆行与否（默认不换行）；在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.

flex-wrap:nowrap;                   默认值，不换行或不拆列

flex-wrap:wrap;                       可以拆行或拆列（第一个行在上方）

flex-wrap:wrap-reverse;       拆行或拆列，以相反的顺序进行拆行或拆列（第一行在下方）

flex-wrap:initial;                    设置该属性为它的默认值

flex-wrap:inherit;                 从父元素继承该属性

3、flex-flow属性是flex-direction和flex-wrap属性的复合属性；在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.该属性可以用于设置或检索弹性盒模型对象的子元素排列方式。如果元素不是弹性盒对象的元素，则flex-flow元素将不会起作用。

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

flex-flow:row nowrap;        默认值，沿水平主轴方向从左向右排列 不换行不换列；

flex-flow:initial;                  设置该属性为它的默认值；

flex-flow:inherit;               从父元素继承该属性。

4、flex-grow属性用于设置或检索弹性盒子的扩展比率，如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.默认值为0。

实例：让第二个元素的宽度为其他元素的三倍：

div:nth-of-type(1) {flex-grow: 1;}

div:nth-of-type(2) {flex-grow: 3;}

div:nth-of-type(3) {flex-grow: 1;}

语法：flex-grow: number|initial|inherit;  （number为一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。）

5、flex-shrink属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

语法：flex-shrink: number|initial|inherit;    （number是一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。）

6、flex-basis属性用于设置或检索弹性盒伸缩基准值，在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。默认值为auto。

实例：设置第二个弹性盒元素的初始长度为 80 像素：

             div:nth-of-type(2) {flex-basis: 80px;}

语法：flex-basis: number|auto|initial|inherit;   （number可以是一个长度单位或者一个百分比，规定灵活项目的初始长度。）

7、justify-content属性定义了项目在主轴上的对齐方式。，

justify-content:flex-start;      （默认值）左对齐

justify-content:flex-end;          右对齐

justify-content:center;              居中

justify-content:space-between;        两端对齐，项目之间的间隔都相等。

justify-content:space-around;           每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5、align-items属性定义项目在交叉轴上如何对齐。

align-items:flex-start;     交叉轴的起点对齐  

align-items:flex-end;       交叉轴的终点对齐。

align-items:center;          交叉轴的中点对齐。

align-items:baseline;       项目的第一行文字的基线对齐。

align-items:stretch;         (默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。

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

align-content:flex-start;                  与交叉轴的起点对齐。

align-content:flex-end;                    与交叉轴的终点对齐。

align-content:center;                         与交叉轴的中点对齐。

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

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

align-content:stretch;                  （默认值）轴线占满整个交叉轴。

7、order属性定义了项目的排列顺序。数值越小，排列越靠前，默认为0​​​​​​​。​​​​​​​

order:<integer>;

8、align-seft属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-seft:auto;

align-seft:flex-start;

align-seft:flex-end;

align-seft:center;

align-seft:baseline;

align-seft:stretch;

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。