响应式布局
Flexbox、Grid、媒体查询等响应式布局方案
1. Flex 弹性布局
Flexbox 是一维布局模型，适合沿主轴分配空间并在交叉轴上对齐项目。
当给父盒子设置 flex 布局，子元素 float，clear，vertical-align 会失效
1.1 原理
通过给父盒子添加 flex 属性，控制子盒子的位置和排列方式
1.2 常见父项元素属性
主轴与侧轴：
- 在默认
flex-direction: row且从左到右、横排书写的页面中，主轴水平向右 - 侧轴与主轴垂直；它的实际方向还受书写模式、文本方向和
flex-direction影响，并不恒等于物理 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 是 flex-grow、flex-shrink、flex-basis 的简写。单个无单位数字常用于按比例分配剩余空间，但不是 flex 的完整定义。
.item {
flex: <number>; /* 常见浏览器展开为 <number> 1 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 网格布局
Grid 是二维布局模型，适合同时控制行和列；Flexbox 与 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；有可分配空间时按 2fr 参与弹性分配 */2.6 auto 关键字
由浏览器确定长度
2.7 gap
grid-row-gap: 10px; /* 行间距 */
grid-column-gap: 10px; /* 列间距 */
grid-gap: 10px 10px; /* 简写 */2.8 类似合并单元格的布局
grid-row: 2 / 5; /* 从第 2 条网格线开始，到第 5 条网格线结束 */
grid-column: 1 / span 2; /* 从第 1 条列线开始，跨 2 个轨道 */2.9 响应式布局
repeat + auto-fill + minmax 去掉右侧空白
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 列宽至少是 200，若有空余则一起等分 */min是轨道最小值，可用长度、百分比或min-content等，但不能使用frmax是轨道最大值，可用长度、百分比、内容关键字或fr等弹性值
意思是在满足最小和最大的范围内，尽可能占据空间
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 类：流式布局容器，百分百宽度，占全部视口的容器