一、flex布局
1.1 flex布局原理
Flexbox（Flexible Box Layout Module）布局，又称弹性布局，是一种旨在解决传统CSS布局模式（如浮动、定位等）在复杂布局场景下局限性的现代化布局模式。Flex布局由W3C提出，目的是为了更好地适应不同屏幕尺寸和设备类型，实现更加简单、强大、响应式的布局设计。
1.2 flex布局父盒子常见属性
flex-direction: 设置主轴方向
justify-content： 设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置flex-direction和 flex-wrap
1.2.1 flex-direction设置主轴方向
flex-direction设置主轴方向，主轴默认为 x轴方向
- row：从左到右
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
1.2.2 justify-content设置主轴上子元素排列方式
justify-content设置子元素排列方式，默认值为flex-start
- flex-start：从头开始，如果主轴是x轴，从左到右
- flex-end：从尾部开始排列，
- center：主轴居中（如果主轴是x轴，水平居中）
- space-around：第一个Flex项目将紧贴容器的起始边（左或上，取决于主轴的方向），最后一个Flex项目将紧贴容器的结束边（右或下）。相邻的Flex项目之间的空白间距将会被拉伸，从而保证它们之间的距离是相同的
- space-between：每个项目的左右两边都有一定的间距，并且这个间距是相对于容器的整个宽度来平均分配的
1.2.3 flex-warp设置子元素是否换行
flex-wrap
- nowrap：不换行，默认值
- wrap：换行
1.2.4 align-items设置侧轴上的子元素排列方式（单行）
align-items，默认值 flex-start
- flex-start：从上到下
- flex-end：从下到上
- center：侧轴居中（垂直居中）
- stretch：拉伸
1.2.5 align-content设置侧轴上的子元素排列方式（多行）
align-content，默认值 flex-start
- flex-start：在侧轴头部开始排列
- flex-end：侧轴尾部开始排列
- center：在侧轴中间显示
- space-around：第一个Flex项目将紧贴容器的起始边（左或上，取决于主轴的方向），最后一个Flex项目将紧贴容器的结束边（右或下）。相邻的Flex项目之间的空白间距将会被拉伸，从而保证它们之间的距离是相同的
- space-between：每个项目的左右两边都有一定的间距，并且这个间距是相对于容器的整个宽度来平均分配的
- stretch：设置子项元素高度平分父元素高度
1.2.5 flex-flow复合属性
flex-flow：复合属性，
- [flex-direction]：row | column
- [flex-wrap]：wrap | nowrap
div {
flex-flow: row wrap;
}
1.3 flex布局子盒子常见属性
1.3.1 flex属性
flex属性包含flex-grow
、flex-shrink和flex-basis三个子属性
- flex-grow：元素会根据需要平均分配容器的额外空间，如果有多个具有相同
flex-grow值的元素，则它们会按比例分配空间- flex-shrink：元素在容器空间不足时，将会按照比例收缩自己的尺寸。
- flex-basis：元素的初始主轴大小基于其内容计算，但在计算前会被视为0，这意味着元素首先不会占据任何固有的主轴空间，而是依赖于
flex-grow和flex-shrink来确定其大小。简写方式：
flex: 1 1 0% 可以简写为 flex: 1;
flex: 2 1 0% 可以简写为 flex: 2;
示例
- 如果一行有三个盒子，左侧盒子和右侧盒子宽高都固定了，中间的盒子可以采用flex属性来分配剩余的空间
- 剩余空间指的是父盒子宽度-子盒子宽度，如果子盒子不设置宽度，剩余空间为父盒子的宽度
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
justify-content: space-between;
flex-wrap: wrap;
align-items: center
}
span:nth-child(1) {
height: 100px;
margin: 5px;
width: 200px;
background-color: skyblue;
}
span:nth-child(2) {
height: 100px;
flex: 1;
margin: 5px;
background-color: skyblue;
}
span:nth-child(3) {
height: 100px;
width: 200px;
margin: 5px;
background-color: skyblue;
}
1.3.2 align-self控制子项自己在侧轴上的排列方式
align-self：设置子项自己在侧轴上的排列方式，用来覆盖align-items属性，默认值为auto，父容器没有align-items属性，元素遵循stretch行为
auto（默认值）： 表示元素继承其父容器的align-items属性值。如果父容器没有显式声明align-items，则元素将遵循stretch行为。stretch： 如果元素未设置固定高度或宽度，则元素的尺寸会沿着交叉轴方向拉伸，使其占据整个容器的剩余空间，同时遵守min/max尺寸限制。flex-start： 元素的交叉轴起点与容器的交叉轴起点对齐，也就是顶部或左侧（取决于交叉轴的方向）。flex-end： 元素的交叉轴终点与容器的交叉轴终点对齐，也就是底部或右侧（取决于交叉轴的方向）。center： 元素在交叉轴方向上居中对齐。baseline： 元素根据其基线对齐。对于文本元素，基线通常是字母x的高度线。并非所有元素都有明确的基线，对于那些没有明显基线的元素，这个值可能表现得像flex-start或center。
二、grid布局模型
2.1 常用属性
2.1.1 grid-template-columns
.grid{
display: grid;
// grid-template-columns 后面几个元素 代表分成几列
// fr 为grid专属单位， 是grid 块剩余空间
grid-template-columns: 1fr 1fr 1fr;
}
2.1.2 gap列间距
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 24px;// 列间距
row-gap: 24px; // 行间距
// gap: 24px; // 统一设置间距
}
2.1.3 grid-templae-areas 排列布局
index.scss
// 分成三行三列，按比例进行划分，
// 通过 grid-area 属性 使用划分出的区域
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer"
header{
grid-area: header;
}
aside{
grid-area: sidebar;
}
main{
grid-area: content;
}
footer{
grid-area: footer;
}
index.html
<div class="layout">
<header>头部</header>
<aside>侧边栏</aside>
<main>内容</main>
<footer>底部</footer>
</div>
2.1.4 单个元素对其方式
.gird{
// 单个元素按块轴居中对其
align-items: center;
// 单个元素按行轴居中对其
justify-items: center;
}
2.1.5 整体对其方式
grid-template-columns设置为 1fr 1fr 1fr ... 后无效
.gird{
// 整体按块轴居中对其
align-content: center;
// 整体按行轴居中对其
justify-content: center;
justify-content: space-between;
}
三、table-cell布局模型
让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，所以尽量避免同时使用。
3.1 功能
设置了display：table-cell的元素有一下特点：
- 对宽度高度敏感
- 对margin值无反应
- 响应padding属性
- 内容溢出时会自动撑开父元素
使用display：table-cell可以实现一下几种效果：
- 大小不固定元素的垂直居中
- 两列自适应布局
- 左右等高
3.2 示例
<style>
.content {
display: table-cell;
padding: 10px;
border: 2px solid #999;
height: 250px;
vertical-align: middle;
}
.content div {
display: inline-block;
vertical-align: middle;
}
.content p {
display: inline-block;
vertical-align: middle;
}
</style>
<div class="content">
<div style="height: 100px;width: 80px;background: #cccccc;"></div>
<div style="height: 120px;width: 80px;background: #639146;"></div>
<div style="height: 140px;width: 80px;background: #2B82EE;"></div>
<div style="height: 160px;width: 80px;background: #F57900;"></div>
<div style="height: 180px;width: 80px;background: #BC1D49;"></div>
<p style="width: 100px">顶顶顶顶顶</p>
<p style="width: 100px">顶顶顶顶顶顶顶顶顶</p>
</div>
