弹性布局（flex布局）

弹性布局（flex）

---

1、基本概念

1. 容器：需要添加弹性布局的父元素
2. 项目：弹性布局容器中的每个子元素
3. 主轴：排列方向
4. 交叉轴：垂直排列方向

2、使用方法

1. 给父元素添加display:flex;属性

.box{
	display:flex;
}

2. display:flex; 容器添加弹性布局后，显示为块级元素;display:inline-flex;容器添加弹性布局后，显示为行级元素;

.box{
	display:inline-flex;
}

3. 设为Flex布局后，子元素的float、clear属性将失效。但是
   position属性，依然生效。
4. 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自
   身在文档流中的定位方式依然遵循常规文档流;

3、作为父容器的六大属性

1. flex-direction（属性决定主轴方向）

• row（默认值）：主轴在水平方向，起点在左端
• row-reverse：主轴在水平方向，起点在右端
• column：主轴在垂直方向，起点在上沿
• column-reverse：主轴在垂直方向，起点在下沿

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

2. flex-wrap（属性定义如何换行）

• nowrap（默认）：不换行，当宽度不够时，每个项目会被挤压宽度。
• wrap：换行，并且第一行在容器最上方。
• wrap-reverse：换行，并且第一行在容器最下方。

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

3. flex-flow：是flex-direction和flex-wrap的缩写形式

• flex-flow: row wrap;（默认值）

.box{
	display:flex;
	flex-flow: row wrap;
}

4. justify-content属性定义了项目在主轴上的对齐方式。（注：此属性与主轴方向息息相关）

• flex-start（默认值）：项目位于主轴起点。
• flex-end：项目位于主轴终点。
• center：居中
• space-between：两端对齐，项目之间的间隔都相等。（开头和最后的项目，与父容器边缘没有间隔）
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（开头和最后的项目，与父容器边缘有一定的间隔）
• space-evenly：每个项目两侧的间隔相等。所以，项目之间的间隔和边框的间隔相同。

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

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

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的重点对齐。
• baseline：项目的第一行文字的基线对齐。（文字的行高、字体的大小会影响每行的基线）
• strench（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

.box{
	display:flex;
	align-items:flex-start | flex-end | center | baseline | strench;
}

6. align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（注：当项目换为多行时，可使用align-content取代align-items）

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

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

4、作用于子项目的6大属性

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

.div1{
	order:1;
}
.div2{
	order:2;
}

2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.div1{
	flex-grow:1;
}
.div3{
	flex-grow:2;
}

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

.div1{
	flex-shrink:0;
}
.div3{
	flex-shrink:1;
}

4. flex-basis定义项目占据的主轴空间。（如果主轴为水平，则设置这个属性，相当于设置项目的宽度。原width将会失效。）

.div1{
	width:100px
	flex-basis:220px;
}

5. flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
   此属性有两个快捷设置：auto=(1 1 auto)/none=(0 0 auto)

.div1{
	flex:1 1 auto | auto | none;
}

6. align-self：定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的
   align-items属性。
   属性值：与align-items相同，默认值为auto，表达继承父容器的align-items属性值。

.div1{
	align-items:flex-start | flex-end | center | baseline | auto;;
}