开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
12列网格布局
12 列网格布局最早源于 960gs 网格布局系统，它和 CSS 原生的网格系统不是同一个东西。简单说，就是把页面分成12列，有列宽和列间距，页面的布局会划分到每个列上面
现在都是用Flexbox来构建网格系统，我们只需要在一个flex容器上放置所有的列数，然后每一个列都是一个flex项目。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 12列网格布局 -->
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
<style>
.container {
margin-top: 5px;
display: flex;
gap: var(--gap, 1rem);
}
.item {
border: 1px solid #222;
flex: 1 1 0%;
min-width: 0;
}
</style>
对于CSS而言，主要使用Flexbox的gap属性来设置列与列之间的间距，然后在flex项目上使用flex属性。
当然，有时也会根据项目需要给flex项目指定具体的值，即给flex项目的flex-basis初始化一个值，同时flex-grow和flex-shrink都重置为0，告诉浏览器该flex项目不能收缩和扩展。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 12列网格布局 -->
<div class="container">
<div class="row">
<div class="column fixed" style="--flex-basis: 50%">50%</div>
<div class="column">auto</div>
<div class="column">auto</div>
</div>
<div class="row">
<div class="column fixed" style="--flex-basis: 33.33%">33.33%</div>
<div class="column">auto</div>
</div>
<div class="row">
<div class="column fixed" style="--flex-basis: 25%">25%</div>
<div class="column">auto</div>
<div class="column fixed" style="--flex-basis: 50%">33.33%</div>
</div>
</div>
</body>
</html>
<style>
.container {
display: flex;
flex-direction: column;
gap: var(--gap-row);
}
.row {
margin-top: 5px;
display: flex;
gap: var(--gap, 1rem);
}
.column {
border: 1px solid #222;
flex: 1 1 var(--flex-basis, 0%);
min-width: 0;
}
.column.fixed {
flex: 0 0 var(--flex-basis);
}
</style>
九宫格布局
九宫格布局就是一个3 x 3的网格，它也经常应用于Web布局中，经常用来展示一些图片，我们也称之为图片墙
虽然使用Flexbox布局能够构建一个网格布局，但Flexbox布局毕竟是一种一维布局，用它来构建九空格布局还是有一定的局限性，需要通过HTML解构强力配合才能实现。
当然你甚至可以使用 12 列网格布局的方式来完成九宫格的布局。但很多时候九宫格布局中的每个元素 （Flex 项目）具有一定的宽高比：
所以自2021年开始，你可以在CSS中使用aspect-ratio属性来设置元素的宽高比
.aspect-ratio-box {
width: 400px;
aspect-ratio: 16 / 9;
}
这样就会得到一个16:9的盒子，浏览器会根据元素的width和宽高比来计算出元素的height的值。
具有不同对齐方式的导航栏
在 Web 应用或 Web 页面中，导航栏（导航菜单）是 Web 中必不可少的一部分。我们也在不同项目中遇到各式各样的导航栏的布局效果
就导航栏对齐方式来说，很多同学都认为 “使用 Flexbox 的对齐方式” 就足以搞定，事实上呢？并非如此。虽然 Flexbox 的对齐方式很强大，但有些场景我们是不能使用 Flexbox 来布局，或者说使用 Flexbox 布局并不是最合适的。
很常见的几种对齐方式:
居中对齐
居左对齐
两端对齐
居右对齐
在前面三种对齐方式中，只需要在相应的flex容器中添加justify-content的属性值即可，而在最后一个对齐方式需要加点样式，因为你无法直接使用 justify-content 的 space-between 就能达到所需要的效果，因此，只需在相应的 Flex 项目上设置 margin-left 为 auto 即可
