一个简单的 CSS Flexbox 速查表

弹性盒结构

行和列 [方向]

主轴定位

空间管理

横轴定位

行管理

商品订单

物品成长

结盟

结论

参考

Flexbox 非常棒，它们使 CSS 中的定位比原始定位（绝对定位、相对定位等）好得多，但由于其结构特性，有时很容易被遗忘或混淆。

专业人士和初学者都很难记住所有的结构差异和风格属性，所以我将分部分介绍Joni Balogna编写的这份很棒的备忘单，我发现它非常棒，非常神奇。

弹性盒结构

这里我们展示了弹性框的结构以及它们的起源是如何被标记的。

我们看到主轴（水平轴）和横轴（垂直轴）

行和列 [方向]

这里我们展示了激活 flexbox 样式的属性以及显示方向的选项。

主轴定位

这里我们展示了如何在主轴上定位弹性项目。你想把它放在哪儿？起点、中心还是终点？

空间管理

这里我们展示了如何管理元素的变量空间，以及它们如何在容器中显示。根据视口，我们可以设置它们的对齐方式：在同一行或溢出。

横轴定位

这里我们展示了如何在主轴上定位弹性项目。我们可以将弹性项目设置为沿主轴拉伸，也可以将其设置为从轴的末端或中心开始拉伸。

行管理

这里向我们展示了当我们有多行时所拥有的属性选项以及如何将它们定位在容器中。

商品订单

这里我们展示了order设置弹性容器中项目布局顺序的属性。容器中的项目先按升序值排序，然后再按其源代码顺序排序。

物品成长

这里我们展示了flex-grow设置flex-grow弹性项目主尺寸因子的属性。

结盟

这里我们展示了各种对齐弹性属性。

结论

感谢您阅读🔥🔥🔥，希望您觉得这篇文章有用🔥

这是完整作弊代码的链接

如果您有任何疑问或只是想聊天，请随时给我发私信

如果您喜欢阅读，请考虑在 Dev.to 和 Twitter 上关注我@heyOnuoha，这样您就不会错过以下主题的新内容：

• Web 开发（JS 和 Python）
• 提升开发者能力
• 机器学习

支持我：

👉 在Twitter上关注我
👉 给我买一个 ☕

参考

• 乔尼·巴洛尼亚
• MDN
• Flexbox 速查表