flex布局

简介

flex是flexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

1.传统布局与flex布局

传统布局

①兼容性好

②布局繁琐

③局限性，不能在移动端很好的布局

flex弹性布局

①操作方便，布局极为简单，移动端应用很广泛

②PC端浏览器支持情况较差

③IE11或更低版本，不支持或仅部分支持

2.布局原理

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

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

②伸缩布局=弹性布局=伸缩盒布局=弹性盒布局-flex布局

3.属性

常见父项属性

①flex-direction：设置主轴的方向

 

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

 

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

 

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

 

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

 

⑥flex-flow，相当于同时设置了flex-direction和flex-wrap

eg:flex-flow:column  wrap

默认主轴方向就是x轴，水平向右

默认侧轴方向就是y轴，水平向下