一、Flex布局是什么？

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
Flexbox通常能让我们更好的操作它的子元素布局：

如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行。
可以快速让他们布局在一列。
可以方便让他们对齐容器的左、右、中间等。
无需修改结构就可以改变他们的显示顺序。
如果元素容器设置百分比和视窗大小改变，不用担心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

注意:设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素，称为Flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”。
在这里插入图片描述

三、容器的属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向

,box{
flex-direction:row | row-reverse | column | column-reverse;
}

上图是分别对flex-direction设置以上四个属性值得效果。

3.2 flex-wrap属性

.box{
flex-wrap:nowrap | wrap | wrap-reverse
}

三个值分别表示：
（1）nowrap(默认) :不换行
（2）wrap:换行，第一行在上方
（3）wrap-reverse:换行，第一行在下方

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box{
flex-flow:< flex-direction >||< flex-wrap >
}

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box{
justify-content: flex-start | flex-end | center | space-between | space-around;
}

3.5 align-items属性

align-item属性定义项目在交叉轴上如何对齐。

.box{
align-item:flex-start | flex-end | center | baseline | stretch;
}

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

四、项目的属性

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

item {
order:0;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0.

	  .outer{
			display: flex;
		}
		.outer div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-left: 20px;
		}
		.outer div:nth-child(1){
			flex-grow:1;
		}
		.outer div:nth-child(2){
			flex-grow:2;
		}
		.outer div:nth-child(3){
			flex-grow:3;
		}
		.outer div:nth-child(4){
			flex-grow:4;
		}

在这里插入图片描述
如上图所示，我们把四个div的flex-grow属性分别设为1,2,3,4，那么他们等于把整个宽度分为10份，分别占1/10、2/10、3/10、4/10。

4.3 flex-shrink属性

flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

	.outer{
			display: flex;
		}
		.outer div{
			width: 300px;
			height: 100px;
			background-color: red;
			margin-left: 20px;
		}
		.outer div:nth-child(1){
			flex-shrink:1;
		}
		.outer div:nth-child(2){
			flex-shrink:2;
		}
		.outer div:nth-child(3){
			flex-shrink:2;
		}
		.outer div:nth-child(4){
			flex-shrink:1;
		}

在这里插入图片描述
由上图可知，当空间不足时，flex-shrink属性值大的缩小。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

item {
	flex-basis:length | auto;
}

4.5 flex属性

flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。
该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

item {
	align-self:auto | flex-start | flex-end  |  center  | baseline  |  stretch;
}

Flexbox——快速布局神器