CSS3之Flex布局（弹性布局/弹性盒子）

一、什么是Flex布局

           Flex，全称Flexible Box，指“弹性布局”或“弹性盒子”，是C3中的一种新的布局方式，可以快速且完整的实现类似于响应式的各种页面布局，适用各种大小变换的场景，几乎兼容各种浏览器。

           1、释义

            使用Flex布局的元素，我们称之为flex container（flex容器），被flex容器包裹的所有元素统称为flex item，也可称之为项目，容器内默认存在有main end（水平轴，又叫主轴）和cross axis（垂直轴），两轴交叉，分别有起始位置start和结束位置end，flex item默认状态下都是沿主轴排列，单个item所占据的空间，主轴的叫mani size，垂直轴的叫cross size。

            2、用法

             通过设置display属性值：

           （1）flex--------------------------生成一个块级容器；

           （2）inline-flex------------------生成一个行块级容器；

             当一个元素的display属性被设置成flex布局后，其容器里面的其他属性将失效，比如：float、clear等。

二、Flex各种属性及介绍

            display: flex;的属性主要分为容器属性和item属性，详细介绍如下：

            1、容器属性、属性值说明

属性	值	值的作用
flex-direction （指定容器中子元素的排列方式）	row	默认值，主轴沿水平方向从左到右
	row-reverse	主轴沿水平方向从右到左
	column	主轴沿垂直方向从上到下
	column-reverse	主轴沿垂直方向从下到上
	initial	将此属性设置为属性的默认值
	inherit	从父元素继承此属性的值
flex-wrap （当容器愉子元素超出父容器时是否换行）	nowrap	默认值，表示项目不会换行
	wrap	表示项目会在需要时换行
	wrap-reverse	表示项目会在需要时换行，但会以相反的顺序
	initial	将此属性设置为属性的默认值
	inherit	从父元素继承属性的值
flex-flow （flex-direction和flex-wrap两个属性的简写）	flex-direction flex-wrap	--
justify-content （容器中元素在主轴方向上的对齐方式）	flex-start	默认值，左对齐
	flex-end	右对齐
	center	居中
	space-between	两端对齐，项目之间的间隔是相等的
	space-around	每个项目两侧的间隔相等
	initial	将此属性设置为属性的默认值
	inherit	从父元素继承属性的值
align-items （容器中元素在纵轴方向上的对齐方式）	stretch	默认值，项目将被拉伸以适合容器
	center	项目位于容器的中央
	flex-start	项目位于容器的顶部
	flex-end	项目位于容器的底部
	baseline	项目与容器的基线对齐
	initial	将此属性设置为属性的默认值
	inherit	从父元素继承属性的值
align-content （修改flex-wrap属性的行为，类似align-items，但不是设置子元素对齐，而是设置行对齐）	stretch	默认值，将项目拉伸以占据剩余空间
	center	项目在容器内居中排布
	flex-start	项目在容器的顶部排列
	flex-end	项目在容器的底部排列
	space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
	space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
	initial	将此属性设置为属性的默认值
	inherit	从父元素继承该属性的值

             2、item属性、属性值说明

属性	值	值的作用
order （设置弹性盒子中子元素的排列顺序）	number	item在容器中的位置，默认值为 0
align-self (容器中的子元素上使用，用来覆盖容器的 align-items 属性)	auto	默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”
	stretch	项目将被拉伸以适合容器
	center	项目位于容器的中央
	flex-start	项目位于容器的顶部
	flex-end	项目位于容器的底部
	baseline	项目与容器的基线对齐
	initial	将此属性设置为属性的默认值
	inherit	从父元素继承属性的值
flex （容器中子元素如何分配空间）	flex-grow	（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0
	flex-shrink	（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1
	flex-basis	（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式
	auto	1 1 auto 和 none 0 0 auto
	flex-grow	容器的扩展比率
	flex-shrink	容器的收缩比率
	flex-basis	容器的伸缩基准值