Генератор на Flexbox и CSS Grid

Как да използвате генератора на flexbox и grid

1. Изберете Оформление: Flexbox или Grid, или започнете от някое от Готови оформления (Центрирано, Навигационна лента, Карти с пренасяне, Странична лента, Адаптивна мрежа от карти, Свещеният граал, 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 се побират, което прави адаптивна мрежа от карти без нито една медийна заявка.

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

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