Flex布局

通常我们要将一个大div里面的四个小div并排显示我们就会先想到display属性，positon属性，float属性的结合使用。

Flex布局能更快更好的达到这一要求

 

行内元素也可以使用Flex布局

 

直接在大盒子给一个display：flex就可以达到小盒子的并排显示，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

 

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

 

 

使用了flex布局后div会根据屏幕的改变而改变证件

 

flex-direction属性

同时小盒子的并排方向也是可以改变的，由主轴决定方向。

在样式上加入flex-direction并设置它的属性就可以改变主轴方向。

 

flex-direction	row（默认）	主轴为水平方向，起点在左端。
	row-reverse	主轴为水平方向，起点在右端
	column	主轴为垂直方向，起点在上沿
	olumn-reverse	主轴为垂直方向，起点在下沿

 

flex-wrap属性

 

同时也可以使用flex来决定盒子如何换行

 

 

 

flex-wrap	Nowrap（默认）	不换行
	wrap	换行，第一行在上方
	wrap-reverse	换行，第一行在下方

 

flex-flow属性

flex-direction属性和flex-wrap属性的结合使用，默认值为row nowrap。