Generátor flexbox a CSS Grid

Ako používať generátor flexbox a grid

1. Vyber Rozloženie: Flexbox alebo Grid, alebo začni jednou z Predvolieb (Vycentrované, Navigačný panel, Zalamované karty, Bočný panel, Responzívna mriežka kariet, Holy grail, 12 stĺpcov).
2. Nastav vlastnosti Kontajnera. Pre flexbox: flex-direction a flex-wrap. Pre grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items a grid-template-areas. Spoločné sú justify-content, align-items, align-content, row-gap (px) a column-gap (px).
3. Položky spravuj pomocou Pridať položku, Odstrániť vybranú položku a Obnoviť vybranú položku. Kliknutím na položku v náhľade (alebo prechodom na ňu klávesom Tab a stlačením Enter) ju vyberieš.
4. Uprav vybranú položku: order a align-self v oboch režimoch, flex-grow, flex-shrink a flex-basis pre flexbox a grid-area, grid-column, grid-row a justify-self pre grid.
5. Skopíruj Kód CSS a zodpovedajúci Kód HTML ich tlačidlami Kopírovať.

Každý ovládací prvok je štandardné pole formulára, takže celý nástroj funguje len s klávesnicou. CSS obsahuje iba vlastnosti, ktoré si zmenil oproti predvoleným, vďaka čomu je krátke, a položky s rovnakým nastavením zdieľajú jedno pravidlo (.item, keď sa zhodujú všetky).

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Flexbox v kocke

Flexbox rozmiestňuje položky pozdĺž jednej osi. flex-direction určuje hlavnú os (riadok alebo stĺpec); justify-content rozdeľuje položky pozdĺž nej (center, space-between…) a align-items ich umiestňuje na priečnej osi. Pri flex-wrap: wrap sa položky, ktoré sa nezmestia, presunú na nový riadok a align-content potom rozmiestni tieto riadky.

Každá položka má tri vlastnosti veľkosti, zvyčajne zapisované spolu ako flex:

• flex-basis: východisková veľkosť (auto použije obsah alebo width);
• flex-grow: aký podiel voľného miesta položka zaberie (0 = žiadny, 1 = rovnaký diel);
• flex-shrink: koľko ustúpi, keď miesta nestačí (0 = nikdy sa nezmenšuje).

Predvoľba Bočný panel ukazuje klasický vzor: bočný panel s flex-basis: 200px a flex-shrink: 0 a hlavná oblasť s flex-grow: 1.

CSS Grid v kocke

Grid rozmiestňuje položky v dvoch rozmeroch. grid-template-columns: repeat(3, 1fr) vytvorí tri rovnaké stĺpce; fr je podiel voľného miesta. repeat(auto-fill, minmax(120px, 1fr)) vytvorí toľko stĺpcov s minimálne 120 px, koľko sa zmestí, čo dá responzívnu mriežku kariet bez akejkoľvek media query.

Položky vypĺňajú bunky v poradí, pokiaľ ich neumiestniš: grid-column: span 2 urobí položku dva stĺpce širokú a grid-column: 1 / -1 ju natiahne cez celý riadok.

grid-template-areas ti umožňuje nakresliť rozloženie pomocou názvov. Zadaj jeden riadok na každý riadok textu, napríklad header header a potom nav main, a položkám daj grid-area: header alebo grid-area: main. Bodka označuje prázdnu bunku. Každý riadok potrebuje rovnaký počet buniek a každý názov musí tvoriť obdĺžnik; inak ťa nástroj upozorní.