流式布局，flex布局

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充

流式布局，百分比布局，只能处理宽度百分比：width：xx%。

​ 高度没有办法确定，所以只能固定，height：xxpx；

flex布局

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

• flex-direction：设置主轴的方向 （direction：方向）

• justify-content：设置主轴上的子元素排列方式 （justify： [ˈdʒʌstɪfaɪ] ，证明..有理。content：内容）

• flex-wrap：设置子元素是否换行

• align-content：设置侧轴上的子元素的排列方式（多行）

• align-items：设置侧轴上的子元素排列方式（单行）

• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap