flex布局整理

flex布局

优点： 使用方便，根据flex规则很容易达到一定的布局效果。 

缺点： 浏览器兼容性比较差，只能兼容ie9及以上 。

     flex容器有以下6个属性（给父级设置）：

1 flex-direction

2  flex-wrap

3 flex-flow

4 justify-content

5 align-items

6 align-content

     flex-direction属性决定主轴(main-axis)的方向：

 

     flex-wrap(换行、包裹):

 

    flex-flow

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

     justify-content

定义了主轴上面的对齐方式

 

     align-items

 沿当前行的横轴布置弹性项目的默认行为。可以将其视为`justify-content`横轴的版本（垂直于主轴） 

 

     align-content

 

 子项

     flex：

设置子项占父项宽度（高度）的比例

     align-self:

设置子项自己在轴上的对其方式：

flex-start

flex-end

center

     主轴方向伪默认方向：

默认的宽度等于内容撑开

默认的高度等于父项的高

flex：1 设置 子项的宽度

align-seft 设置 子项在侧轴上的对齐

     主轴方向改了column：

默认的高度等于内容撑开

flex：1设置 子项的高度

align-seft 设置 子项在侧轴上的对齐（水平）

默认的宽度等于父项的宽度