一个交互式的Flexbox指南

Flexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed.

Flexbox是一种非常强大的布局模式。当我们真正理解它的工作原理时，我们可以构建动态布局，它们会自动响应并根据需要重新排列。

For example, check this out:

例如，看看这个：

This demo is heavily inspired by Adam Argyle’s incredible “4 layouts for the price of 1” codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses fluid principles to create a layout that flows seamlessly.

这个演示受到了 Adam Argyle 令人难以置信的 “4 layouts for the price of 1” codepen 的启发。它不使用媒体查询或容器查询，而是使用流体原则创建了一个无缝流动的布局。

Here's the relevant CSS:

下面是相关的CSS：

form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; } .name { flex-grow: 1; flex-basis: 160px; } .email { flex-grow: 3; flex-basis: 200px; } button { flex-grow: 1; flex-basis: 80px; }

I remember running into demos like this and being completely baffled. I knew the basics of Flexbox, but this seemed like absolute wizardry!

我记得以前看到过这样的演示，完全被搞糊涂了。我知道Flexbox的基础知识，但这似乎就像是绝对的魔法！

In this blog post, I want to refine your mental model for Flexbox. We'll build an intuition for how the Flexbox algorithm works, by learning about each of these properties. Whether you're a CSS beginner, or you've been using Flexbox for years, I bet you'll learn quite a bit!

在这篇博文中，我想完善您对Flexbox的心智模型。我们将通过学习每个属性来建立对Flexbox算法的直觉。无论您是CSS初学者还是多年使用Flexbox的经验，我敢打赌您会学到很多！

Let's do this!

让我们开始吧！

Content warning

内容警告

I make a food-related metaphor later in this tutorial.

我在本教程的后面使用了一个与食物相关的比喻。

Way better on desktop!

在桌面上更好！

This tutorial features a ton of interactive demos, and some of these demos just really don't work super great on smaller devices.

本教程包含大量的交互式演示，其中一些演示在较小的设备上效果不太好。

I've done my best to make them mobile-friendly, but for the best experience, I recommend going through th...