5 种 Flex 结合 Margin 的高效布局技巧，让你的代码更优雅！

大家好，我是前端架构师，关注微信公众号【程序员大卫】免费领取前端精品资料。

背景

将 Flexbox 与 margin 结合使用，可以比传统的 justify-content: center; align-items: center; 布局方式更加简洁高效。今天，我将介绍 5 种常见的 Flexbox 配合 margin 的布局方法。

为了方便展示，这里使用了 tailwindcss，以下是几个常见的 CSS 类的含义：

• m-auto 相当于 margin: auto;
• mx-auto 相当于 margin-left: auto; margin-right: auto;
• ml-auto 相当于 margin-left: auto;
• mr-auto 相当于 margin-right: auto;

1. 红色方块水平垂直居中

通过为红色方块设置 m-auto，使其在父容器内水平垂直居中。

<div class="flex size-[300px] border">
  <div class="m-auto size-[100px] bg-red-600"></div>
</div>

2. 绿色方块靠右对齐

为绿色方块设置 ml-auto，使其在容器内靠右对齐。

<div class="flex h-[50px] w-[400px] border">
  <div class="size-[50px] bg-red-500"></div>
  <div class="size-[50px] bg-yellow-500"></div>
  <div class="ml-auto size-[50px] bg-green-500"></div>
</div>

3. 绿色和蓝色方块靠右对齐

同样，绿色方块设置 ml-auto，使其在父容器内靠右对齐。蓝色方块跟随其后。

<div class="flex h-[50px] w-[400px] border">
  <div class="size-[50px] bg-red-500"></div>
  <div class="size-[50px] bg-yellow-500"></div>
  <div class="ml-auto size-[50px] bg-green-500"></div>
  <div class="size-[50px] bg-blue-500"></div>
</div>

4. 绿色方块居中

为绿色方块设置 mx-auto，使其在容器内水平居中，左右两侧均留白。

<div class="flex h-[50px] w-[400px] border">
  <div class="size-[50px] bg-red-500"></div>
  <div class="size-[50px] bg-yellow-500"></div>
  <div class="mx-auto size-[50px] bg-green-500"></div>
  <div class="size-[50px] bg-blue-500"></div>
</div>

5. 列表均等分排列

在这个例子中，我们使用 calc 函数动态计算每个元素之间的间距。假设每行有 7 个元素，剩余空间为 100% - 7 * 50px。由于每个元素左右都有边距，总共有 14 个边距（7 个元素 * 2），因此我们将剩余空间除以 14 来得到每个边距的大小。

计算方法如下：

--n: 7;  /* 每行元素数量 */
--h: calc((100% - var(--n) * 50px) / (var(--n) * 2));  /* 计算每个元素左右的间距 */

<style>
.box {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: 300px;
  border: 1px solid #000;
}

.item {
  width: 50px;
  height: 50px;
  background: red;
  /* 每行显示 7 个元素 */
  --n: 7;
  --h: calc((100% - var(--n) * 50px) / (var(--n) * 2));
  margin: 20px var(--h);
}
</style>

<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

总结

通过将 Flexbox 和 margin 结合使用，我们可以快速实现各种布局需求。无论是居中对齐、靠右对齐，还是实现动态间距的均等排列，都是十分简洁且高效的。