版面安排

版面安排工具是近年來的改變裡,曝光度最高的領域之一。Flexbox 首先出現,接著 CSS Grid 以最多功能、最圖像化方式的處理 CSS 版面安排之姿登場。

想要精通,可能得花比以往還要多一些的時間,這也就能解釋許多使用者還沒實際使用過的原因。不過,絕對值得投入!

外圍圓圈的大小代表知道某功能的使用者總數,而內圈代表實際在使用的人數。 將滑鼠移到節點上,就可以看到詳細資料,還有代表此問卷答題者總數的區塊

「全體」這欄顯示每一項技術的整體使用情況(也就是答題者選取了「會再使用」或「不會再使用」), 而接下來的幾欄是依照「資歷年數」分組的使用比例。

比較亮的粉紅色背景,代表該分組比全體平均比例還要高。

資歷年數
全體
<1
1~2
2~5
5~10
10~20
>20
Flexbox
92.82%
84.14%
92.79%
94.63%
94.88%
95.43%
95.06%
Grid
54.87%
50.22%
55.69%
53.52%
53.46%
55.84%
60.47%
Multi-Column Layout
27.56%
10.57%
13.58%
21.49%
32.19%
43.8%
43.76%
Writing Modes
7.33%
4.41%
5.75%
6.67%
6.62%
9.01%
11.53%
Exclusions
6.33%
2.2%
5.02%
6.57%
7.42%
7.83%
8.94%
與全體使用情況的差距:
-20%-10%0+10%+20%

Grid

完成答題百分比 99.38% (11247)
完成答題百分比 99.38% (11247)
百分比%數量Σ
已經在用54.37%
知道是什麼,但沒用過43.21%
沒聽過/不確定那是什麼1.8%

CSS 格線佈局長於把頁面的主要區域分離、或是在 HTML 原生語法構建的區域間,定義大小、位置、層次等方面的關聯。

Flexbox

完成答題百分比 99.68% (11281)
完成答題百分比 99.68% (11281)
百分比%數量Σ
已經在用94.43%
知道是什麼,但沒用過4.64%
沒聽過/不確定那是什麼0.61%

CSS 彈性盒子布局(CSS Flexible Box Layout)是 CSS 的模塊。它為了最佳化 CSS 盒子模型的用戶介面設計而來、並把項目都配置在一個維度之內。在彈性盒子布局中,彈性容器的子項目們可以伸展到任何方向、並讓他們的尺寸更加「彈性」、或者持續增大,以填補未使用的空間,抑或縮小,以避免父元素溢出。子項目橫向或縱向對齊都很容易操作。

Multi-Column Layout

完成答題百分比 99.73% (11287)
完成答題百分比 99.73% (11287)
百分比%數量Σ
已經在用30.86%
知道是什麼,但沒用過28.13%
沒聽過/不確定那是什麼40.74%

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

Writing Modes

完成答題百分比 99.73% (11287)
完成答題百分比 99.73% (11287)
百分比%數量Σ
已經在用7.35%
知道是什麼,但沒用過19.41%
沒聽過/不確定那是什麼72.97%

CSS Writing Modes is a CSS module that defines various international writing modes, such as left-to-right (e.g. used by Latin and Indic scripts), right-to-left (e.g. used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some Asian scripts).

Exclusions

完成答題百分比 99.67% (11280)
完成答題百分比 99.67% (11280)
百分比%數量Σ
已經在用7.09%
知道是什麼,但沒用過14.3%
沒聽過/不確定那是什麼78.29%

Exclusion 是 block 等級元素,功能是產生排除區塊 (exclusion box),而且不是 float。 Exclusion 元素提供全新的 block 格式情境(來源:Chen Hui Jing。)

Learn CSS Layout and Animations

Video course teaching layout with CSS Grid, Flexbox and CSS animations in CodePen

Learn CSS Grids and Flexbox for Responsive Web Design

Master CSS Grid and Flexbox, the latest tools and tricks to layout beautiful, responsive web applications with less code.
感謝贊助我們的合作夥伴! 深入詳情。