[前端学习笔记] CSS移动端flex弹性布局

一、什么是flex弹性布局

1. flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
   为盒子模型提供更大的灵活性，任何一个容器都可以指定flex布局。
2. 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
3. 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。【图片参考自https://www.runoob.com/w3cnote/flex-grammar.html】
   
4. 布局原理：通过给父盒子添加flex属性，控制子盒子的位置和排列方式。
5. 特性：
   ·flex不分块级元素、行内元素、行内块元素
   ·父盒子设为flex布局后，子元素的float、clear、vertical-align属性消失
   ·子容器可以横向排列，也可以纵向排列
6. 对比
   ·传统布局：兼容性好；布局繁琐，不能在移动端很好的布局。
   ·flex弹性布局：操作方便，布局简单，移动端应用广泛；PC端浏览器支持情况较差。

二、flex弹性布局常见属性

1. 父元素的6个属性：
   flex-direction：主轴的方向
   flex-wrap：子元素是否换行
   flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
   justify-content：主轴上子元素的排列方式
   align-content：侧轴上的子元素排列方式（多行）
   align-items：侧轴上的子元素排列方式（单行）

div {
	   /* 父元素布局方式设置为flex */
       display: flex;
       width: 800px;
       height: 300px;
       background-color: pink;
       
       /* 【默认】，默认从左往右，若翻转后row-reverse从右往左 */
       flex-direction: row; 
       /* 设置列为主轴，默认从上到下，若翻转后column-reverse从下到上 */
       flex-direction: column;
       
       /* 默认子元素是不换行的。如果装不开会缩小子元素的宽度，放到父元素里面 */
       flex-wrap: nowrap; 
       /* 设置为可以换行 */
       flex-wrap: wrap;

	   /* 同时设置主轴方向、是否换行/列 */
       flex-flow: column wrap;

	   /* 主轴子元素从头部开始排列【默认】*/
	   justify-content: flex-start;
       /* 主轴子元素从尾部开始排列 */
       justify-content: flex-end;
	   /* 主轴子元素居中对齐 */
       justify-content: center;
       /* 主轴子元素平分剩余空间 */
       justify-content: space-around;
       /* 主轴子元素先两边贴边，再分配剩余的空间 */
       justify-content: space-between;	

	   /* （单行）侧轴子元素从头部开始排列 */
       align-items: flex-start;	
       /* （单行）侧轴子元素从尾部开始排列 */
       align-items: flex-end;	
       /* （单行）侧轴子元素居中 */
       align-items: center;	
       /* （单行）侧轴子元素拉伸【默认】但子元素不要给高度 */
       align-items: stretch;	
       /* （单行）侧轴子元素基线对齐 */
       align-items: baseline;	

	   /* （多行）侧轴子元素从头部开始排列 */
       align-content: flex-start;
       /* （多行）侧轴子元素从尾部开始排列 */
       align-content: flex-end;	
       /* （多行）侧轴子元素居中 */
       align-content: center;	
       /* （多行）侧轴子元素平分剩余空间 */
       align-content: space-around;	
       /* （多行）侧轴子元素两边贴边，再平分剩余空间 */
       align-content: space-between;
}

2. 子元素的6个属性：
   flex：分配剩余空间，子元素占的份数
   align-self：子项自己在侧轴独特的排列方式，可覆盖align-items属性
   order：子项的排列顺序，默认为0，数值越小越靠前
   flex-grow：子项的放大比例，默认为0，不放大
   flex-shrink：子项的缩小比例，默认为1，空间不足时自动缩小
   flex-basis：计算子项占据的主轴空间。浏览器可以根据这个属性，计算主轴是否有多余空间。

<p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
</p>
<style>
	  p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        p span {
            flex: 1;
        }
        p span:nth-child(2) {
        /* 第2个占2份，其他的占1份 */
            flex: 2;
            background-color: purple;
        }
</style>

div span:nth-child(2) {
      /* 默认是0，-1比0小，所以能排在前面 */
      order: -1;
}
div span:nth-child(3) {
      /* 只让3号盒子下来 */
      align-self: flex-end;
}

三、（补充）背景线性渐变

<style>
        div {
            width: 600px;
            height: 200px;
            /* 背景渐变必须添加浏览器私有前缀!! */
            background: -webkit-linear-gradient(left, red, blue); 
            /* 默认是top 从上往下渐变 */
            background: -webkit-linear-gradient(red, blue);
            /* 设置从左上开始渐变 */ 
            background: -webkit-linear-gradient(top left, orange, blue);
        }
</style>

四、flex弹性布局缺点

浏览器兼容性比较差，只能兼容到ie9及以上。