使用display:flex 弹性布局

这是我写的第一篇博客，文章部分转至网络，部分来自自己的理解，如有错误之处，望指出。

文章里所用的大部分图片和部分观点采用来至阮一峰博客《flex布局教程：语法篇》

原文地址：flex布局教程：语法篇--阮一峰

一般传统的网页布局方式是采用盒模型+浮动+定位等，如需要实现完美的布局，就需要多种方式配合，这样会产生很多代码，不利于维护，为解决这种状况，CSS3的推出多种新的布局方式，来解决这种状况。

现在来讲讲flex布局

flex布局可以简单、响应式的实现页面布局。而它现以得到主流浏览器的支持。

一：基本概念

设置方式：将伸缩容器设置为display:flex.再设置flex的属性即可进行布局。

如将ul设为flex布局

ul{
       	display: flex;
       }

行内元素也可设为flex布局

div{
       	display: inline-flex;
       }

flex容器内有两条轴，主轴（main axis）和侧轴（cross asix），每条轴都有起点和终点。

默认情况下，主轴和侧轴如下图进行排列。

而需要伸缩布局的父元素叫：伸缩容器

伸缩布局的元素叫：伸缩项

注意：伸缩容器设为flex后，伸缩项的floatv、clear、vertical-align将会失效。

二：伸缩容器可设置的属性