CSS之flex布局

flex（flexible box缩写），该布局又称弹性布局，伸缩布局
传统布局与flex布局对比

传统布局	flex布局
兼容性好	一些浏览器不支持或仅部分支持
布局较繁琐	操作方便，布局简单
在移动端不能很好地布局	移动端应用很广泛

当我们为父盒子设置flex布局以后，子元素的float、clear、vertical-align属性将失效，

父项常见属性

属性名	作用
flex-direction	设置主轴方向
justify-content	设置主轴上元素的排列方式
flex-wrap	设置子元素是否换行
aligin-content	设置侧轴上的子元素排列方式（多行）
aligin-items	设置侧轴上的子元素排列方式（单行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction设置主轴的方向

默认主轴方向是x轴方向，水平向右
默认侧轴方向是y轴方向，水平向下

设置主轴方向

属性	说明
row	从左到右（默认值）
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

flex-direction设置谁为主轴，那么另一个就是侧轴，子元素是跟着主轴排列的

justify-content设置主轴上的子元素排列方式

使用这个属性前要确定好主轴

属性	描述