CSS—flex布局之基本概念

flex布局

flex布局是w3c于2009年提出的概念，可以方便、完整、响应式的实现各种页面布局。flex全称Flexible Box，意为弹性布局，可以为盒状布局提供最大的灵活性。任何一个元素都可以指定为flex布局。Webkit内核的浏览器，必须加上-webkit前缀。注意，设为flex布局后，子项目的float、clear、vertical-align属性将失效。 

/*块级元素定义为flex布局*/
.box{ display: flex; display: -webkit-flex;}

/*行内元素定义为flex布局*/
.box{ display: inline-flex; display: -webkit-inline-flex;}

flex布局浏览器兼容性 

                     

flex容器和项目

flex是CSS3弹性盒模型中比较常用的属性。采用flex布局的元素，称为flex容器（简称容器），容器中的所有子元素，称为flex项目（简称项目）。

                              

容器默认有两根轴，其一水平的主轴（main axis），其二垂直的交叉轴（cross axis）。主轴的开始位置叫main start，结束位置叫main end。交叉轴的开始位置叫cross start，结束位置叫cross end。项目默认沿主轴排列，单个项目占据的主轴空间叫main size，占据的交叉轴空间叫cross size。