Flexbox

Flexbox 用来沿一条主轴排列一组子元素。它特别适合导航栏、按钮组、卡片行，以及需要对齐和分配剩余空间的界面。

创建 Flex 容器

先在共同的父元素上写 display: flex。父元素成为 Flex 容器，它的直接子元素成为 Flex 项目。默认主轴是水平方向，所以项目从左到右排列。

<nav class="nav">
  <strong>Leaflet</strong>
  <a href="#courses">Courses</a>
  <a href="#practice">Practice</a>
  <button>Sign in</button>
</nav>

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

justify-content 控制主轴上的分布，align-items 控制交叉轴上的对齐，gap 在相邻项目之间创建一致间距。把 flex-direction 改为 column 后，主轴会变成纵向。

处理空间不足

默认情况下，Flex 项目会尽量挤在同一行。加入 flex-wrap: wrap 后，项目可以在窄屏中换到下一行。某个项目使用 margin-right: auto，还可以占用主轴上的剩余空间，把后面的项目推向另一侧。

编写顺序

• 先确认共同父元素，并设置 display: flex。
• 再决定主轴方向，以及主轴和交叉轴的对齐。
• 使用 gap 设置项目间距，并在窄屏中检查是否需要换行。
• 不要依赖固定宽度挤出间距，避免文字变长后布局破裂。

<nav class="nav">
  <strong>Leaflet</strong>
  <a href="#courses">Courses</a>
  <a href="#practice">Practice</a>
  <button>Sign in</button>
</nav>