4 Flexbox tricks you must know 1. How to perfectly center an element 2. How to create sticky footers 3. How to create basic grids with Flexbox 4. How to create media objects with Flexbox Conclusion

2025-06-04

你必须知道的 4 个 Flexbox 技巧

1. 如何完美地居中元素

2. 如何创建粘性页脚

3. 如何使用 Flexbox 创建基本网格

4. 如何使用 Flexbox 创建媒体对象

结论

如需交互式教程，请访问此处

如果你一直在尝试掌握 Flexbox，这里有一个实用教程。没有废话，没有废话，只有你需要知道的非常重要的实用技巧。

1. 如何完美地居中元素

看到这里，你首先想到的可能是：“嘿，这很容易实现。” 但事实真的如此吗？

考虑下面的标记。

很简单。本质上就是把一张图片放进文档里。

<!doctype html>
<html lang="en">
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

没人喜欢丑陋的设计。所以我们就直接给整个文档加上一个backgound-color。

body {
  background-color: #f1c40f;
}
Enter fullscreen mode Exit fullscreen mode

以下是我们现在所拥有的。

HTML

<!doctype html>
<html lang="en">
  <head>
    <title>Centering with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

html,
body {
    width: 100%;
  height: 100%;
}
body {
  margin: 0;
  background-color: #f1c40f;
}
Enter fullscreen mode Exit fullscreen mode

输出
替代文本

因此，让我们将图像完美地置于文档的中心。

第一步，使body元素成为弹性容器。

body {
  display: flex
}
Enter fullscreen mode Exit fullscreen mode

很简单。现在我们可以完美地对齐图像了。

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

瞧！图像现在完美居中了。在上面的代码清单中，Lines3和4就像是魔法棒，让一切变得完美。

替代文本

现在图像将居中对齐。

完整的代码解决方案如下所示。如果您愿意，可以在这里试用一下代码。您可以删除突出显示的行，并查看它们分别对显示的影响。

HTML

<!doctype html>
<html lang="en">
  <head>
    <title>Perfeclty centered image</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="150px" />
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

html,
body {
    width: 100%;
  height: 100%;
}
body {
  margin: 0;
  display:flex;
  background-color: #f1c40f;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

2. 如何创建粘性页脚

如果您已经编写 CSS 一段时间了，我相信您已经认识到了这个问题。

即使页面内容稀疏，将页脚保持在页面底部也是一件很麻烦的事。值得庆幸的是，Flexbox 提供了一个解决方案。

考虑下面的标记：

<!doctype html>
<html lang="en">
  <head>
    <title>Sticky footer</title>
  </head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

它是一个基本的页面设置，带有一个header、一个内容区域main和一个footer。

为了使页面的每个部分都可以区分，让我们继续为它们赋予不同的背景颜色。

header {
  background-color: #27ae60;
}

main {
  background-color: #3498db;
}

footer {
  background-color: #c0392b;
}
Enter fullscreen mode Exit fullscreen mode

现在确保文档主体填满整个屏幕

body {
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

从技术上讲，line 2就是“确保min-heightbody 元素的最小高度 ( ) 为视口高度 ( vh) 的 100%”

术语“视口”是指网页上用户可见的区域。

现在让我们开始行动吧

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，line 3初始化了 flexbox 模型。然后呢line 4？

请记住，的默认值flex-direction是row。

flex-diection:column将方向从horizontal改为vertical。

子元素 、header和main现在footer将垂直对齐

移动到最佳位置。给定footer并header固定高度。

header, footer {
  height: 50px;
}
Enter fullscreen mode Exit fullscreen mode

最后，让页脚变得粘性。

main {
  flex: 1 0 0;
}
Enter fullscreen mode Exit fullscreen mode

我以为我们应该以 为目标footer，而不是main？

是的，但是我们使页脚粘性的方式是通过指示浏览器占用main屏幕上的整个可用空间。

这header使得树叶footer能够达到自己的高度，同时main生长以适应可用的剩余空间。

如果你还记得的话，flex: 1 0 0说，“扩大容器以适应整个可用空间，保持初始宽度为零，并且不要缩小容器的大小”

再次，这是完整的代码。

HTML

<html lang="en">
  <head>
    <title>Sticky footer</title>
  </head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

header {
  background-color: #27ae60;
}

main {
  background-color: #3498db;
}

footer {
  background-color: #c0392b;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  height: 50px;
}
main {
  flex: 1 0 0;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

$(document).ready(function () {
$('#content').html('<span>Hello World!</span>');
});
Enter fullscreen mode Exit fullscreen mode

输出

替代文本

3. 如何使用 Flexbox 创建基本网格

用户界面越来越复杂。未来某一天，你可能需要创建不同宽度的界面。

这样的示例包括具有多列布局的页面，例如下面的 2 列布局。

替代文本

考虑下面的基本设置：

<html lang="en">
  <head>
    <title>2 column layout</title>
  </head>
<body>
  <aside></aside>
  <main></main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

因此，我们有一个aside和一个main标签。aside包含侧边栏元素，而main标签包含页面的主要内容。

要开始解决这个问题，像往常一样，制作body一个弹性容器。

body {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

让body填满用户的视口

body {
  min-height: 100vh;
  display: flex; 
}
Enter fullscreen mode Exit fullscreen mode

找到解决方案的最佳点。

aside指定和的宽度main。

aside {
  background-color: #2c3e50;
  width: 200px;
}

main {
  background-color: #c0392b;
  flex: 1 0 0;
}
Enter fullscreen mode Exit fullscreen mode

Line 3将侧边栏部分的宽度设置为200px。很简单。

Line 8设置该main部分占用剩余可用空间（即整个可用空间减去200px）

请记住flex: 1 0 0“扩大以适应可用空间，不要缩小，初始宽度为零”

这是所有正在运行的代码，结果也如下。

HTML

<html lang="en">
  <head>
    <title>2 column layout</title>
  </head>
<body>
  <aside></aside>
  <main></main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
  height: 100vh;
  margin: 0;
  display: flex;
}

aside {
  background-color: #2c3e50;
  width: 200px;
}

main {
  background-color: #c0392b;
  flex: 1 0 0;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

和往常一样，除非你动手玩代码，否则你还不算掌握这个概念。请务必动手！

4. 如何使用 Flexbox 创建媒体对象

什么是媒体对象？

说实话，我不确定我能给出一个非常专业的答案。不过，下面是一个例子：

替代文本

那么，它只是一堆带有图像的文本吗？

嗯，有点儿。

不过，先别急着下结论。你会惊讶地发现，很多网站都实现了这个功能。比如，看看一条普通的推文：

替代文本

你看到了什么？一个媒体对象！

让我们用 Flexbox 构建一个。

考虑下面的基本标记：

<html lang="en">
  <head>
    <title>Media object with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
  </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

因此，我们有了带有图像和主要内容区域的基本设置。

现在看起来是这样的：

HTML

<html lang="en">
  <head>
    <title>Media object with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
  </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

输出

替代文本

body通过创建flex-container来启动 Flexbox 模型。

结果如下：

HTML

<html lang="en">
  <head>
    <title>Media object with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
  </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

输出

替代文本

是的——看起来很可怕。

图像被拉伸以适应垂直轴。这是因为默认情况下，align-items设置为stretch。

让我们改变这一点。

HMTL

<html lang="en">
  <head>
    <title>Media object with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="100px" />
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
  </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
  display: flex;
  align-items: flex-start;
  background-color: #8cacea;
  color: #fff;
}

img {
  margin-right: 1em;
}
Enter fullscreen mode Exit fullscreen mode

输出

替代文本

现在我们的媒体对象已经完美对齐了。你可能注意到我在那里加了一些颜色。

和往常一样，只有当你真正动手操作代码时，你才算掌握了概念。这正是这篇互动文章的重点。

请返回并确保您减去、添加并玩弄代码 - 您可以做任何事情！

结论

我真的很高兴你不仅开始了本教程，而且还完成了它！

那么你现在要做什么？

一定要仔细检查代码，掌握它并构建一些令人难以置信的 UI！

随着时间的推移，你会发现这些技巧有多有用。祝你学习愉快！

文章来源：https://dev.to/education/4-flexbox-tricks-you-must-know-4904
Devto 翻译
PREV
5 种经过实践检验的编程面试准备技巧
NEXT
15 个 JavaScript 技巧：简化代码的最佳实践