flex布局两天总结

1.首先明白二倍图的原理和记住我们写移动端网页参考的是逻辑分辨率！

2.flex布局的特点：{

是浏览器提倡的布局方式，但兼容性比较高！使用之前需要先问清除需不需要考虑低版本浏览器能否兼容的问题！

flex布局不脱标，具有伸缩比这个特点。

布局简单方便

}

3.主轴和侧轴： {

主轴
        justify-content
        center：居中
        space-between：间距出现在弹性盒子之间（两端对齐，中间等距 使用较多）
        space-evenly：父子级间距都相同 （平分间距）
        space-around：间距出现在弹性盒子两侧 （两端离弹性容器的距离是中间弹性盒子之间距离的一半）
        视觉效果: 子级之间的间距是父级左右两侧间距的2倍

侧轴
        align-items（控制所有弹性盒子）这个是调整单行侧轴对齐方式
        center：居中
        stretch：默认值， 拉伸      （如果弹性盒子没有给高度，默认的拉伸效果会使高度跟父盒子高度一致！剪掉内边距）
        align-self（控制某个弹性盒子）这个写在子盒子身上

}

4.弹性伸缩比 {

 
     flex: 整数数字; （这个也是写在子元素弹性盒子上）
    占用父级剩余尺寸的份数

 举例：比如弹性容器里面有三个弹性盒子，弹性容器的宽度是五百左右两边内边距是五十，第一个给了宽度200opx，给第二个盒子和第三个盒子都写一个flex=1，这是二三两个盒子的宽度就等于500px-100px（内边距）-200px在除以2（两份，因为二三盒子各占一份）所以二三盒子的宽度就是100px。

要记住弹性盒子之间的外边距也要包含在内！

如果弹性盒子没有给宽高，宽度由自己的内容撑开，高度默认拉伸继承父亲的高度！

}

  修改主轴的方向 {

  原因：flex布局中默认的弹性容器主轴方向是水平方向，弹性盒子会在一行显示。有时我们需要                 将弹性盒子并列显示就需要改变主轴的方向
    命令：flex-direction：column；(将主轴的的方向修改为垂直方向，侧轴的方向就成了水平方向）

记住修改主轴方向会把里面的内容跟着修改

比如一开始主轴为默认水平方向，里面的弹性盒子会一行显示

 调整主轴为垂直方向后

 主观上看里面的内容变成了一列排列，但要记住还是在一行上显示，并且在侧轴上也是一行显示！

如果实在分不清记住可以使用侧轴单行命令align-items：center测试，发现盒子水平居中了，就是单行！

}

弹性盒子换行 

因为是弹性容器里面的盒子，所以里面的子盒子默即使宽度超过了父盒子的宽度，也会在父盒子里面显示，会把父盒子分成份数（超过了父盒子的宽度，就按照几个子盒子就分成几份）这个就是弹性容器的伸缩比特点

命令：  flex-wrap: wrap;

换行了就成为了多行，这时就不能使用单行侧轴的命令。因为是多行了

调整多行对齐方式：
命令 ：align-content
    取值与主轴对齐方式基本相同

}