flex弹性布局

弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
使用方法：父元素设置display:flex
注意：父元素属性设置了flex布局其子元素的float,clear,vertical-align将无效

常用属性

flex-direction

flex-direction 调整子元素的排列方向（默认水平方向row）column(垂直)

.main{
   
	width:400px;
	height:300px;
	border:1px solid red;
	margin: 0 auto;