Flexbox и Grid игралиште

Како да го користите Flexbox и Grid игралиштето

1. Изберете Распоред: Flexbox или Grid, или почнете од еден од Готови распореди (Центриран, Навигациска лента, Картички што се префрлаат, Странична лента, Респонзивна мрежа од картички, Holy grail, 12 колони).
2. Подесете ги својствата на Контејнер. За flexbox: flex-direction и flex-wrap. За grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items и grid-template-areas. И двата делат justify-content, align-items, align-content, row-gap (px) и column-gap (px).
3. Управувајте со Елементи преку Додај елемент, Отстрани го избраниот елемент и Ресетирај го избраниот елемент. Кликнете на елемент во прегледот (или стигнете до него со Tab и притиснете Enter) за да го изберете.
4. Уредете го избраниот елемент: order и align-self во двата режима, flex-grow, flex-shrink и flex-basis за flexbox и grid-area, grid-column, grid-row и justify-self за grid.
5. Копирајте го CSS код и соодветниот HTML код со нивните копчиња Копирај.

Секоја контрола е стандардно поле од образец, па целото игралиште работи само со тастатура. CSS содржи само својства што сте ги променеле од основните вредности, што го држи кратко, а елементите со идентични поставки делат едно правило (.item кога сите се совпаѓаат).

Алатката работи во вашиот прелистувач. Ништо од внесеното не се испраќа на сервер.

Flexbox накратко

Flexbox ги распоредува елементите по една оска. flex-direction ја одредува главната оска (ред или колона); justify-content ги распределува елементите по неа (center, space-between…), а align-items ги позиционира на попречната оска. Со flex-wrap: wrap елементите што не се собираат се префрлаат во нов ред, а align-content потоа ги распоредува тие редови.

Секој елемент има три својства за димензионирање, обично запишани заедно како flex:

• flex-basis: почетната големина (auto ја користи содржината или width);
• flex-grow: колку од слободниот простор го зема елементот (0 = ништо, 1 = еднаков дел);
• flex-shrink: колку отстапува кога просторот е тесен (0 = никогаш не се собира).

Обликот Странична лента го покажува класичниот шаблон: странична лента со flex-basis: 200px и flex-shrink: 0 и главна област со flex-grow: 1.

CSS Grid накратко

Grid ги распоредува елементите во две димензии. grid-template-columns: repeat(3, 1fr) создава три еднакви колони; fr е дел од слободниот простор. repeat(auto-fill, minmax(120px, 1fr)) создава онолку колони од најмалку 120px колку што се собираат, што прави респонзивна мрежа од картички без media query.

Елементите ги пополнуваат ќелиите по ред, освен ако ги позиционирате: grid-column: span 2 го прави елементот широк две колони, а grid-column: 1 / -1 го протега преку целиот ред.

grid-template-areas ви овозможува да го нацртате распоредот со имиња. Внесете еден ред по линија, на пример header header па nav main, и дајте им на елементите grid-area: header или grid-area: main. Точката означува празна ќелија. Секој ред бара ист број ќелии и секое име мора да формира правоаголник; алатката ве предупредува инаку.