页面书写新工具：弹性盒子

弹性盒子模型的优点

• 操作方便，布局简单，移动端使用比较广泛
• pc端浏览器支持情况较差（一点点而已）
• IE11或耕地版本不支持flex或仅支持一部分

flex是弹性盒子模型，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

设置为flex过后，子元素的float、clear和vertical-align将会失效

概念：

使用flex布局的元素被称为容器它的所有子元素自动会成为容器成员简称“项目”

原理：就是给父盒子添加display：flex属性过后，父盒子会成为弹性容器，子元素会默认排列在一行内显示，可以通过在主轴或副轴上的排列方式来控制其“项目”的堆叠。

以屏幕原点（左上角为原点），向右延申的一条直线为X轴（主轴），向下延申的则为Y轴（副轴）。

使用：

设置弹性盒子：为父元素设置display:flex；

父元素所添加属性：

flex-direction属性 改变主轴的方向（主轴默认是从原点向右）

flex-direction属性值：row(默认值不改变，从左到右)

				row-reverse(从右到左)

				column:(主轴排列改变，从原点开始从上到下)

				column(主轴方向改变，从下到上)

flex-wrap （换行） nowrap(默认，不换行)

				wrap(换行)

				wrap-reverse  换行第一行在下方

flex-flow(flex-direction 和flex-wrap的简写)

justify-content（主轴上的排列方式）flex-start(左对齐)

							flex-end(右对齐)

							center(居中)

							space-between(两端对其)

							space-around(每个项目之间的间隔相等，两端间隔相

							加等于一个中间间隔)						 					       

align-items(副轴上的对其方式) flex-start(交叉轴的起点对其)

							flex-end(终点对其)

							center(中点对其)

							baseline(项目的第一行文字的基线对齐)

							stretch(默认值)如果项目为设置高度或设为auto，将

							占满整个容器的高度元素被拉伸以适应容器

align-content(多根轴线的对齐方式) align-content属性定义了多跟轴线的对齐方式如果项

							只有一根轴线则不起作用。同justify-content一样

							有flex-start、flex-end、center、stretch、							space-	between、space-around.		  

弹性子元素属性： flex-grow放大比例

							order属性(项目的排列顺序，order属性数值越小排列

							越靠前，默认值为0，可以为负数

							flex-grow放大比例，（在子元素不写宽的情况下，直

							接增加flex-grow:1;就会使得子元素平分父元素的空				

							间）

flex-shrink：缩小比例 默认值为1，如果为0，其他项目为1，则前者不会缩小

							负值无效

flex-basis项目占据的主轴空间 在计算主轴剩余空间时，它的默认值为auto，即项目

							的本来大小

简写：flex(flex-grow flex-shrink flex-basis) 的简写

flex:auto 相当于flex:1 1 auto;也可以放大也可以缩小

flex:none flex:0 0 auro;不扩大也不缩小

flex:1 flex:1 1 0%

flex:0 flex:0 1 0%

align-self 允许项目有自己单独的不一样的排列方式