响应式布局
Flexbox、Grid、媒体查询等响应式布局方案
1. Flex 弹性布局
操作方便，布局简单，移动端应用广泛。flex box
当给父盒子设置 flex 布局，子元素 float，clear，vertical-align 会失效
1.1 原理
通过给父盒子添加 flex 属性，控制子盒子的位置和排列方式
1.2 常见父项元素属性
主轴与侧轴：
- 默认主轴为 x 轴，水平向右
- 默认侧轴为 y 轴，水平向下
- 元素跟着主轴排列
1.2.1 flex-direction 设置主轴方向
| 值 | 描述 |
|---|---|
row | 默认值，从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
1.2.2 justify-content：设置主轴子元素排列方式
| 值 | 描述 |
|---|---|
flex-start | 默认值，从头部开始 |
flex-end | 从尾部开始 |
center | 居中对齐 |
space-around | 平分剩余空间 |
space-between | 先两边贴边，再平分剩余空间 |
垂直居中：
flex-direction: column;
justify-content: center;1.2.3 flex-wrap 设置子元素是否换行
flex 布局中默认子元素不换行，装不开子元素宽度会缩小
flex-wrap: nowrap;不换行flex-wrap: wrap;换行
1.2.4 align-items 设置侧轴上的子元素排列方式（单行）
| 值 | 描述 |
|---|---|
flex-start | 默认值，从上到下 |
flex-end | 从下到上 |
center | 居中（垂直居中） |
stretch | 拉伸 |
1.2.5 align-content 设置侧轴上子元素的排列方式（多行）
| 值 | 描述 |
|---|---|
flex-start | 默认值，在侧轴头部开始排列 |
flex-end | 在侧轴尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布两头，再平分剩余空间 |
stretch | 设置子项拉伸 |
1.2.6 flex-flow 复合属性
flex-flow: flex-direction flex-wrap;1.3 flex 布局子项常见属性
1.3.1 flex 属性
定义子项目分配剩余空间，用 flex 来表示占多少份数
.item {
flex: <number>; /* default 0 */
}1.3.2 order 属性
控制项目在容器中的先后顺序，可以为负值，0
.item {
order: <number>; /* default 0 */
}1.3.3 flex-grow
定义项目放大比例，正整数默认为 0 不放大
所有项目该属性为 1，则将等分剩余空间；若一个为 2，其他为 1，则前者占的剩余空间比其他项多一倍
.item {
flex-grow: <number>; /* default 0 */
}1.3.4 flex-shrink
定义项目缩小比例，默认为 1 缩小，0 为不缩小
.item {
flex-shrink: <number>; /* default 1 */
}1.3.5 align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}align-self 允许单个项目有与其他项目不一样的对齐方式
2. Grid 网格布局
flex 布局可能出现当用 justify-content 时，页面底部出现较大空白区域，grid 可以解决
display: grid; /* 改变方式为 grid */
grid-template-columns: 1fr 1fr 1fr; /* 均分三列 */
gap: 30px; /* 元素间距为 30px */grid-template-columns：列数列宽
2.1 网格轨道
grid-template-columns列grid-template-rows行
2.2 grid-template-columns: repeat()
定义网格容器中水平方向列的网格轨道布局结构
grid-template-columns: repeat(number, size1, size2, ...);- number 每行中重复的次数
- size 所要重复的值，可以是具体长度值（像素，百分比，fr 等）
可以有多个，每个值对应一列的宽
如果只有一个，所有列将使用相同的大小，比如
grid-template-columns: repeat(3, 1fr);
2.3 grid-template-rows: repeat()
行高
auto-fill 自动填充，一行或一列中尽可能容纳更多的单元格
2.4 fr 关键字
代表网格容器可用空间的一等份
grid-template-columns: 200px 1fr 2fr;
/* 第一个容器列宽 200px，剩下的宽度分为两部分，1/3 和 2/3 */2.5 minmax() 函数
给定一个长度范围
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
/* 第三个的列宽最少 300px，最大不能大于第一二列的两倍 */2.6 auto 关键字
由浏览器确定长度
2.7 gap
grid-row-gap: 10px; /* 行间距 */
grid-column-gap: 10px; /* 列间距 */
grid-gap: 10px 10px; /* 简写 */2.8 类似合并单元格的布局
grid-row: 2/5; /* 从第几行开始/第几行占几个 */
grid-column: 1/2; /* 从第几列开始/第几列占几个 */2.9 响应式布局
repeat + auto-fill + minmax 去掉右侧空白
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 列宽至少是 200，若有空余则一起等分 */min轨道的最小值，可以是固定长度 px，可以是相对值 % vwmax轨道的最大值，同样可以是固定长度或相对值
意思是在满足最小和最大的范围内，尽可能占据空间
fr 等分响应式
grid-template-columns: 1fr 1fr 1fr;repeat + auto-fill 固定列宽变列数
grid-template-columns: repeat(auto-fill, 200px); /* 固定列宽 200px，数量自适应 */3. 媒体查询
使用媒体查询针对不同宽度的设备进行布局和样式的设置，响应式开发的原理。
需要一个父级做布局容器，通过媒体查询改变容器大小，再改变里面子元素排列和大小。
3.1 语法
1.mediatype 查询类型
all适用所有设备print打印机和打印预览screen电脑屏幕，平板电脑，智能手机等
@media mediatype and/not/only (media feature) {
CSS-Code;
}2.关键字
将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and：且not：排除某个媒体类型（非）only：指定某个媒体类型，可省略
从小到大写，具有层叠性
3.2 容器类
container 类：固定宽度
container-fluid 类：流式布局容器，百分百宽度，占全部视口的容器