CSS弹性布局

弹性布局也叫flex布局，flex是flex box的缩写，意为弹性布局或弹性盒子，是css3中的一种新的布局模式，适用于适应不同屏幕大小以及不同设备类型。目前，几乎所有的浏览器都支持Flex布局。

·基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：

 

 

 

ps:可以通过将元素的display属性设置为flex或者inline-flex。当一个元素设置了flex布局以后，他子元素的float、clear等属性将失效。

·CSS中通过以下属性来实现Flex布局