移动WEB-flex弹性布局

1. 概述

1. 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。
2. CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩
   性，在响应式开中可以发挥极大的作用。
3. 别名：伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

2. 布局原理

1. flex 是 flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以
   指定为 flex 布局，不需要转换盒子类型
2. 采用了 flex布局 的元素，称为flex容器，它的子元素称为flex项目
3. 总结flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3. 注意

1. 当我们为父元素设为 flex 布局以后，子元素的float、clear、vertical-align属性将失效
2. flex布局没有外边距合并
3. flex布局，分配剩余空间分配的是内容盒，剩余空间会先减掉盒子的border、padding 再分配。所以当
   子元素均分剩余空间的时候，它们相等的是内容盒，如果有的盒子设置了边框、内边距，那它整体盒子
   就会比其它盒子大

4. 语法

    display:flex; /*在父级盒子中申明伸缩布局*/

5. 父元素的属性

1. 设置主轴的方向(默认水平)
    flex-direction:
    取值：
        a). row; 水平方向为主轴,从左到右排列(默认的主轴)
        b). row-reverse; 水平方向为主轴,从右到左排列 
        c). column; 垂直方向为主轴,从上到下排列
        d). column-reverse; 垂直方向为主轴,从下到上排列
        注：水平为主轴,垂直就是侧轴;垂直为主轴,水平就是侧轴

2. 控制子元素是否换行显示(默认不换行) 
    flex-wrap: 
    取值： a).  wrap;  换行,如果一行放不下所有子元素,则自动换行
           b).  nowrap; 不换行,如果一行放不下子元素,则平均收缩每个子元素的宽度(默认不换行)
           c).  wrap-reverse; 翻转,原来是从上往下排列,翻转后是从下往上排列(很少用)

3. 设置主轴方向+设置换行显示
   flex-flow: row wrap; 水平方向为主轴,换行显示

4. 设置子元素在主轴上的排列方式(默认从左到右)
    justify-content: 
    在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴。默认主轴方向是x轴，y是侧轴
    
    取值: a). flex-start; 让子元素从父元素起始位置开始排列(类似于子元素左浮动)为默认
              的排列方式

          b). flex-end; 让子元素从父元素的结束位置开始排列(类似于子元素右浮动)，元素的顺序还是从左到右

          c). center; 让子元素从父元素中间位置开始排列(类似于所有子元素居中排一起)

          d). space-between; 左右对齐，中间平均分页，产生相同间距

          e). space-around; 将多余的空间平均分页在每一个子元素两边(类似于左右margin,中间的间距是两边的两倍)



5. 设置子元素在侧轴上的对齐方式（单行子元素）
    align-items：
    取值：center; 居中对齐
          flex-start; 顶部对齐
          flex-end; 底部对齐
          stretch; 拉伸,让子元素在侧轴方向上拉伸,填满整个侧轴,前提是子元素没有设置高度;(默认值)
          baseline; 按照子元素中文本的基线对齐(用的很少)
6. 设置子元素在侧轴上的对齐方式（多行子元素）
	align-content：
	只能用于子元素出现了换行的情况（多行），在单行没有效果
	取值： flex-start; 在侧轴的头部开始排列（默认值）
		  flex-end; 在侧轴的尾部开始排列
		  center; 在侧轴中间显示
		  space-around; 子元素在侧轴平分剩余空间
		  space-between; 子元素在侧轴先分布两头，再平分剩余空间
		  stretch; 设置子元素高度平分父元素高度

6. 子元素的属性

1. 定义子元素在父元素中占据几份剩余空间
    flex:1;
    会计算所有子元素flex的值,然后按值占的比例分配；默认为0
    也可以用百分比
    

2. 定义收缩比例
    flex-shrink: 在一行放不下所有子元素而又不换行的情况下,子元素会平均收缩
    比例值计算：当前空间的flex-shrink值/所有兄弟元素的flex-shrink值的和(包括当前元素的值)
    平均收缩的默认值为1;表示每个子元素收缩一份空间;
    不想收缩可以设置为0;但是有可能会导致子元素溢出

3. 扩展子元素的宽度
   flow-grow: 设置当前元素应该占据父元素剩余空间的比例值(1、2、3...);
   比例值计算：当前空间的flex-grow值/所有兄弟元素的flex-grow值的和(包括当前元素的值)
   flow-grow默认值为0：说明子元素并不会去占据剩余空间

4. 设置单个元素在侧轴方向上的对齐方式（了解）
    align-self:
     取值：center; 居中对齐
          flex-start; 顶部对齐
          flex-end; 底部对齐
          stretch; 拉伸,让子元素在侧轴方向上拉伸,填满整个侧轴,前提是子元素没有设置高度;(默认值)
          baseline; 按照子元素中文本的基线对齐(用的很少)
5. 设置子元素的排列顺序（了解）
	order：
	取值：数值越小，排列越靠前，默认为0，可以为负数
	注意：和z-index不一样

7. flex布局的特点

1. 操作方便，布局极为简单，移动端应用很广泛
2. pc端浏览器支持情况较差
3. IE11 或更低版本，不支持或仅部分支持
4. 如果是pc端页面布局，我们还是用传统布局
5. 如果是移动端或者不考虑兼容问题的pc端页面布局，我们还是使用flex弹性布局

8. flex布局中固定定位的问题

1. 一般固定定位应用于导航栏
2. 固定定位如果设置了 left、top，它是相对于整个浏览器的可视窗口
3. 想要让固定定位跟body标签一样居中，必须写left = 50%，然后用transform：translateX（-50%）居中
4. 固定定位在 flex 中需要设定宽度一般为100%，还要设置最大最小宽度，跟body一样