目录
一、传统布局与flex布局
1.1 优缺点
1.2 使用场景
二、flex布局的原理
2.1 容器
2.2 项目
2.3 作用
三、flex布局下父项的常见属性（6个）
3.1 设置主轴的方向 ★
3.2 设置主轴上的子元素排列方式 ★
3.3 控制子元素是否换行 ★
3.4 设置侧轴上的子元素排列方式（单行）★
3.5 设置侧轴上的子元素的排列方式（多行）
3.6 align-items和align-content的区别
3.7 复合属性
3.8 常见6种父项属性的总结
四、flex布局下子项的常见属性（3个）
4.1 flex属性（重要）
4.2 align-self属性和order 属性
4.3 常见3种子项属性的总结
五、背景线性渐变
一、传统布局与flex布局
1.1 优缺点
传统布局Flex弹性布局兼容性好操作方便，布局极为简单，在移动端应用广泛布局繁琐（浮动、清除浮动……）PC端浏览器支持情况较差有局限性，不能在移动端很好的布局IE 11 或更低版本，不支持或部分支持
1.2 使用场景
1、如果是PC端布局，仍使用传统布局；
2、如果是移动端，或不考虑兼容性问题的PC端页面布局 ，则使用flex弹性布局
二、flex布局的原理
2.1 容器
采用flex布局的元素，被称为flex容器（Flex container），简称“容器”。
2.2 项目
容器的所有子元素自动成为容器成员，被称为flex项目（Flex item），简称“项目”。
2.3 作用
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
三、flex布局下父项的常见属性（6个）
3.1 设置主轴的方向 ★
flex-direction: 属性值；
1）主轴默认是x轴，那么此时y轴就是侧轴；反之，如果设置主轴为y轴，那么x轴就成为了侧轴。
注：
在flex布局中，分为主轴与侧轴两个方向，或被叫做：行和列、x轴和y轴。
默认主轴方向为x轴方向，水平向右；
默认侧轴方向为y轴方向，水平向下。
2）子元素是顺着主轴排列的。也就是说，如果主轴是x轴，其子元素就水平排列（左右），反之主轴若是y轴，其子元素就垂直排列（上下）。
3）属性值及其说明：
属性值子元素的排列方式flex-direction: row;从左到右（默认x轴为主轴）flex-direction: row-reverse;从右到左flex-direction: column;从上到下 （设置y轴为主轴）flex-direction: column-reverse;从下到上
4）使用：设置主轴为y轴
代码：
1
2
3
效果：
3.2 设置主轴上的子元素排列方式 ★
justify-content: 属性值；
1）属性值及其说明：
属性值子元素的排列方式justify-content: center;在主轴居中对齐justify-content: flex-start;从主轴头部开始排列（默认）justify-content: flex-end;从尾部开始排列justify-content: space-around;平均分配剩余空间（最左最右元素不贴边）justify-content: space-between;先两边贴边，再平均分配剩余空间justify-content: space-evenly;每个元素之间的间隔相等（最左最右元素不贴边）
2）使用：设置主轴（x轴 or y轴）上子元素的排列方式
代码：(主轴为x轴，设置x轴上子元素先两边贴边,再分配中间剩余的空间的效果)
1
2
3
4
效果：(主轴为x轴，设置x轴上子元素先两边贴边,再分配中间剩余的空间的效果)
代码：(主轴为y轴，设置y轴上子元素上下顶满，中间剩余空间平均分配的效果）
1
2
3
效果：(主轴为y轴，设置y轴上子元素上下顶满，中间剩余空间平均分配的效果）
3.3 控制子元素是否换行 ★
在flex布局中默认不换行。一般是在有多行子元素时使用。
1）属性值及其说明
属性值说明flex-wrap: nowrap;不换行（默认）flex-wrap: wrap;换行
2）使用：设置父盒子，使得子元素能换行显示
代码：
1
2
3
4
5
6
效果：
3.4 设置侧轴上的子元素排列方式（单行）★
align-items: 属性值；
1）属性值及其说明
属性值子元素的排列方式align-items: flex-start;从上到下（默认）align-items: flex-end;从下到上align-items: center;挤在一起居中（子元素没有间隔）align-items: stretch;拉伸（默认值，设置此元素时，不要给子元素高度）
2）使用： 设置父盒子，让子盒子沿着侧轴（y）垂直居中
代码：
1
2
3
效果：
3.5 设置侧轴上的子元素的排列方式（多行）
align-content: 属性值；
1）属性值及其说明
属性值子元素的排列方式align-content: flex-start;从侧轴的头部开始排列（默认）align-content: flex-end;从侧轴的尾部开始排列（贴底对齐）align-content: center;在侧轴居中显示align-centent: stretch; 各行将会伸展以占用剩余的空间（自动平分父亲的高度）。如果剩余的空间是负数，
该值等效于’flex-start’ (默认)
align-content: space-around; 最边上的子项不贴边，再平分剩余空间
（相邻子元素的边距为2倍被分配的空间）
align-content: space-between;子项在侧轴先分布在两边，再平分剩余空间
2）使用：设置父盒子，使得最边上的子盒子不贴边，并且平分剩余的空间
代码：
1
2
3
4
5
6
效果：(此处是因为父盒子div给的高度太高了，上下行的子盒子才隔得比较远)
3.6 align-items和align-content的区别
3.7 复合属性
flex-flow: 属性值1 属性值2；
主要是flex-direction 和 flex-wrap 这两个属性的复合写法。
代码：实现在主轴（y轴）上，子元素的换列效果
1
2
3
4
5
效果：
3.8 常见6种父项属性的总结
flex-direction设置主轴的方向justify-content设置主轴上的子元素排列方式flex-wrap控制子元素是否换行align-items设置侧轴上的子元素的排列方式（单行）align-content设置侧轴上的子元素的排列方式（多行）flex-flowflex-direction和flex-wrap的复合属性
四、flex布局下子项的常见属性（3个）
4.1 flex属性（重要）
定义子项目在剩余空间中所分配的空间，占多少份数。
1）flex属性值的写法
flex: 数字 or 百分比； （默认为0）
2）使用
代码：
1
2
3
效果：
1 实现 左右孩子固定，中间孩子自适应的 效果
2 第一个孩子和第三个孩子占1份，第二个孩子占2份
4.2 align-self属性和order 属性
1）说明
（1）align-self属性
设置子项自己在侧轴上的排列方式；
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性；
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch；
（2）order属性
定义子项目的排列顺序；
数值越小，排列越靠前（默认为0）；
注意：和 z-index 不一样。
2）使用：只让3号盒子到底侧来，且让2号盒子排列在前
代码：
1
2
3
效果：
4.3 常见3种子项属性的总结
flex子项目所占的份数（可为数字和百分比）align-self子项目自己在侧轴的排列方式order子项的排列顺序（数值越小，排列越靠前）
五、背景线性渐变
在css3中，可以使用background属性和linear-gradient()函数来实现背景线性渐变。
1）语法
background: linear-gradient(渐变方向, 颜色1, 颜色2, ...);
代码：
效果：