Skip to content

布局

使用什么布局方式进行元素布局?

CSS 网格布局 (Grid)

Customize Data
印象模糊
有听说过
用过
2019
2020
2021

子网格 (Subgrid)

Customize Data
印象模糊
有听说过
用过
2020
2021

弹性盒模型 (Flexbox)

Customize Data
印象模糊
有听说过
用过
2019
2020
2021

CSS 多列布局(Multi-Column)

Customize Data
印象模糊
有听说过
用过
2019
2020
2021

CSS 书写模式 (Writing Modes)

Customize Data
印象模糊
有听说过
用过
2019
2020
2021
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: The CSS Paint API

The Paint API allows us to create images programmatically, to use in our CSS. It unlocks a whole world of creativity, and I am very excited about it!

We asked members of the CSS community to share their “pick of the year”

George Francis

Developer, writer, and generative artist.

Customize Data
印象模糊
有听说过
用过
2020
2021

逻辑属性(Logical Properties)

Customize Data
印象模糊
有听说过
用过
2020
2021
Customize Data
印象模糊
有听说过
用过
2020
2021
💡

通过每个图表上方的导出按钮,可以获取图表的原始 JSON 数据,或者是可以在我们的公共API中运行的 GraphQL 查询。

content-visibility

Customize Data
印象模糊
有听说过
用过
2020
2021

Gap property for flexbox

Customize Data
印象模糊
有听说过
用过
2021
Customize Data
印象模糊
有听说过
用过
2021

Container Queries

Customize Data
印象模糊
有听说过
用过
2021

资源推荐

CSS Grid & Flexbox for Responsive Layouts, v2

Learn the essential CSS layout techniques for building responsive, beautiful web applications. You'll get hands-on practice using CSS Grid for two-dimensional, grid-based layouts and Flexbox for styling one-directional flow.
感谢合作伙伴对我们的支持! 了解更多。