Flex布局及几种常用的布局实现

一、简介

在传统的网页布局中主要基于盒状模型，依赖display属性+position属性+float属性来实现页面布局，它对于一些特殊的布局非常不方便，而Flex布局则可以简便、完整、响应式的实现各种复杂的布局。

Flex是flexibal Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。设为Flex布局以后，子元素的float、clear、Vertical-align将失效。

二、Flex基本概念

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

                     

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

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

三、常用容器属性

• flex-derection     决定主轴的方向，属性值：row（主轴为水平，起点在左端）、row-resvere（水平，起点在右端）、column（主轴为竖直，起点在上沿）、column-reverse<