flex布局

一：与传统布局的区别

1：传统布局兼容性好，布局繁琐，局限性是不能在移动端很好的布局

      flex弹性布局操作方便，布局极为简单，移动端应用很广泛，pc端浏览器支持情况差

二：flex布局原理：

弹性布局任何一个容器都可以指定为flex布局，当我们为父盒子设置flex布局后，子元素的float，clear，vertical-align将失效，布局原理就是给父盒子添加flex属性来控制盒子和盒子的位置和排列方式

三：flex常见属性：

1：flex—direction:设置主轴的方向

属性值：row   从左到右

              row-reverse   从右到左

              column  从上到下

              column——reverse  从下到上

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

属性值：flex-start：默认从头开始

              flex-end：从尾部开始

              center： 在主轴居中对齐

              space-around：平分剩余空间

              space-between：  先俩边贴近，在平分剩余空间

3：flex-wrap： 设置子元素是否换行默认都在一条线上，不换行，如果装不开的话会缩小子元素的宽度

属性值：no-wrap     不换行

                wrap          换行

成y轴，那么x轴就变成了侧轴

 

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

属性值：flex-start    从上到下     flex-end：从下到上

                center  垂直居中           stretch      拉伸

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

属性值：flex-start：从侧轴头部开始      flex-end 在侧轴尾部开始排列

                center    在侧轴中间                space-around  子项平分剩余空间

                space-between    先靠紧俩边再剩余中间

6:flex-flow：符合属性，相当于同时设置direction和wrap属性

属性值：column   wrap   主轴为横轴 换行

三：子项常见属性：

1：flex子项目占的份数，定义子项目分配的神与空间，用flex来表示占了多少份

2：align-slef：控制某一个子项再侧轴对齐方式

3：order定义项目排列顺序，数值越小越靠前默认是0