Layout

Narzędzia układów są jednym z obszarów, w których w ostatnich latach nastąpiły największe zmiany. Pierwszy Flexbox pojawił się na scenie, a następnie CSS Grid wyłonił się jako najbardziej wielowartościowy i ekspresyjny sposób obsługi układów CSS.

Opanowanie może zająć trochę więcej czasu, co wyjaśnia, dlaczego wielu użytkowników w rzeczywistości z niego nie korzystało, ale z pewnością wart jest wysiłku!

Rozmiar zewnętrznego okręgu okręgu odpowiada całkowitej liczbie użytkowników, którzy wiedzą o danej funkcji, podczas gdy wewnętrzna reprezentuje tych, którzy faktycznie z niej korzystali.

Najedź kursorem na każdy węzeł, aby wyświetlić szczegółowe dane wraz z nakładką reprezentującą całkowitą liczbę respondentów ankiety.

Kolumna „ogólna” pokazuje całkowite wykorzystanie dla każdej funkcji (respondenci, którzy wybrali „użyłem tego”), podczas gdy poniższe kolumny pokazują współczynnik wykorzystania dla każdego przedziału „lat doświadczenia”.

Jaśniejsze różowe tło wskazuje stosunek wyższy niż średnia dla danego nawiasu.

Lat Doświadczenia
ogólny
<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%
Różnica od ogólnego wykorzystania:
-20%-10%0+10%+20%

Grid

Procen ukończenia: 99.38% (11247)
Procen ukończenia: 99.38% (11247)
Procenty%IlośćΣ
Użyłem tego54.37%
Wiem co to jest ale tego nie używałem43.21%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest1.8%

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Dowiedz się więcej

Flexbox

Procen ukończenia: 99.68% (11281)
Procen ukończenia: 99.68% (11281)
Procenty%IlośćΣ
Użyłem tego94.43%
Wiem co to jest ale tego nie używałem4.64%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest0.61%

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

Dowiedz się więcej

Multi-Column Layout

Procen ukończenia: 99.73% (11287)
Procen ukończenia: 99.73% (11287)
Procenty%IlośćΣ
Użyłem tego30.86%
Wiem co to jest ale tego nie używałem28.13%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest40.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.

Dowiedz się więcej

Writing Modes

Procen ukończenia: 99.73% (11287)
Procen ukończenia: 99.73% (11287)
Procenty%IlośćΣ
Użyłem tego7.35%
Wiem co to jest ale tego nie używałem19.41%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest72.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).

Dowiedz się więcej

Exclusions

Procen ukończenia: 99.67% (11280)
Procen ukończenia: 99.67% (11280)
Procenty%IlośćΣ
Użyłem tego7.09%
Wiem co to jest ale tego nie używałem14.3%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest78.29%

Element wykluczający jest elementem blokowym, który nie jest elementem pływającym i generuje pole wykluczenia. Element wykluczający ustanawia nowy kontekst formatowania bloków (przez Chen Hui Jing).

Dowiedz się więcej

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.
Dziękujemy naszym partnerom za wsparcie! Dowiedz się więcej.