跳至內容

版面安排

如何把螢幕上的元素定位?

CSS Grid

自訂資料
從未聽過
知道是什麼
已經有用過
2019
2020
2021

Subgrid

自訂資料
從未聽過
知道是什麼
已經有用過
2020
2021

Flexbox

自訂資料
從未聽過
知道是什麼
已經有用過
2019
2020
2021

CSS 多欄排版 (Multi-Column)

自訂資料
從未聽過
知道是什麼
已經有用過
2019
2020
2021

CSS 書寫模式 (Writing Modes)

自訂資料
從未聽過
知道是什麼
已經有用過
2019
2020
2021
我們詢問 CSS 社群的成員,分享「年度精選」

我的 2021 精選: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!

我們詢問 CSS 社群的成員,分享「年度精選」

George Francis

開發者、作家與生成藝術家

position: sticky

自訂資料
從未聽過
知道是什麼
已經有用過
2020
2021

邏輯參數 (Logical Properties)

自訂資料
從未聽過
知道是什麼
已經有用過
2020
2021

aspect-ratio

自訂資料
從未聽過
知道是什麼
已經有用過
2020
2021
💡

每區上方的匯出按鈕可以取得圖表的原始 JSON 資料或 GraphQL query。

content-visibility

自訂資料
從未聽過
知道是什麼
已經有用過
2020
2021

Flexbox 的 gap 屬性

自訂資料
從未聽過
知道是什麼
已經有用過
2021

斷行規則

自訂資料
從未聽過
知道是什麼
已經有用過
2021

容器 Query

自訂資料
從未聽過
知道是什麼
已經有用過
2021

推薦資源

CSS Grid & Flexbox for Responsive Layouts, v2

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.
感謝贊助我們的伙伴! 深入瞭解。