Flexbox 速查表 对齐项目 Flex 方向和 Flex 包裹 Flex 项目 对齐内容

2025-05-25

Flexbox 速查表

对齐项目

Flex Direction 和 Flex Wrap

弹性项目

内容对齐

在我们的第一期 CSS,我们讨论了 CSS 的基础知识。在本期特别附加期中,我们继续探讨了 CSS 的一些更深入的领域,例如使用 Grid 和 Flexbox 进行布局、动画、媒体查询、命名约定、预处理器和框架。

以下是一些与本集配套的 Flexbox 速查表!🐞

向 Emma 致谢,感谢她制作了这些!

[已删除用户] 图片

[已删除用户]

对齐项目

align-items:4 种不同的图形显示 align-items 可以采用的值。flex-start 将所有项目置于容器顶部。flex-end 将所有项目置于容器底部。center 将所有项目在容器中垂直对齐。stretch 将所有项目在容器中垂直拉伸。

Flex Direction 和 Flex Wrap

flex-direction:显示所有项目都沿水平方向行进的行值,row-reverse 也沿水平方向但方向相反。显示所有项目都沿垂直方向行进的列值,column-reverse 也沿垂直方向但方向相反。<br> flex-wrap:3 种不同的图形显示 3 个潜在值。nowrap 表示所有子项都停留在同一行,以适应容器的大小。wrap 表示子项保持其宽度并浮动到下一行。wrap-reverse 表示它们换行但方向相反。

弹性项目

弹性盒项目属性顺序:弹性项目在弹性容器内的排列顺序。默认顺序:0,所有项目均按其在 HTML 中的顺序排列。显式顺序值允许您更改 CSS 中项目的顺序。弹性增长:使您的弹性项目能够在容器内增长。默认弹性增长:1,所有项目大小相同。显式弹性增长值:某些项目会填充周围空间。align-self:让您的弹性项目覆盖 align-items。align-self:flex-end;将项目置于弹性容器的末尾。

内容对齐

justify-content:4 种不同的图形显示 justify-content 可以采用的值。flex-start 将所有项目置于容器左侧。flex-end 将所有项目置于容器右侧。center 将所有项目在容器中水平对齐。space-between 将所有项目均匀分布。space-around 将所有项目均匀分布,两侧有边距。

您还可以在这里查看我们的 CSS 速查表:

无论您在哪里收听播客,都可以收听完整剧集!

文章来源:https://dev.to/ladybug/flexbox-cheat-sheets-5h55
PREV
六种数据结构助您在技术面试中脱颖而出🐞 数组🐞 链表🐞 堆栈🐞 队列🐞 二叉树🐞 图
NEXT
编程面试的五个技巧