Flexbox- och grid-lekplats

Så använder du flexbox- och grid-lekplatsen

1. Välj en Layout: Flexbox eller Grid, eller utgå från någon av Förinställningar (Centrerat, Navigeringsfält, Radbrytande kort, Sidofält, Responsivt kortrutnät, Holy grail, 12 kolumner).
2. Ställ in egenskaperna för Behållare. För flexbox: flex-direction och flex-wrap. För grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items och grid-template-areas. Båda lägena delar justify-content, align-items, align-content, row-gap (px) och column-gap (px).
3. Hantera Element med Lägg till element, Ta bort valt element och Återställ valt element. Klicka på ett element i förhandsvisningen (eller tabba dit och tryck på Enter) för att välja det.
4. Redigera det valda elementet: order och align-self i båda lägena, flex-grow, flex-shrink och flex-basis för flexbox, samt grid-area, grid-column, grid-row och justify-self för grid.
5. Kopiera CSS-kod och den matchande HTML-kod med deras knappar Kopiera.

Alla kontroller är vanliga formulärfält, så hela lekplatsen fungerar med enbart tangentbordet. CSS-koden innehåller bara de egenskaper du har ändrat från standardvärdena, vilket håller den kort, och element med identiska inställningar delar en regel (.item när alla är lika).

Flexbox i korthet

Flexbox placerar element längs en axel. flex-direction anger huvudaxeln (en rad eller en kolumn); justify-content fördelar elementen längs den (center, space-between …), och align-items placerar dem på tväraxeln. Med flex-wrap: wrap flyttas element som inte får plats till en ny rad, och align-content fördelar sedan raderna.

Varje element har tre storleksegenskaper, som oftast skrivs tillsammans som flex:

• flex-basis: startstorleken (auto utgår från innehållet eller width);
• flex-grow: hur stor del av det lediga utrymmet elementet tar (0 = inget, 1 = en lika stor andel);
• flex-shrink: hur mycket det ger upp när utrymmet inte räcker (0 = krymper aldrig).

Förinställningen Sidofält visar det klassiska mönstret: ett sidofält med flex-basis: 200px och flex-shrink: 0, och ett huvudområde med flex-grow: 1.

CSS Grid i korthet

Grid placerar element i två dimensioner. grid-template-columns: repeat(3, 1fr) skapar tre lika breda kolumner; fr är en andel av det lediga utrymmet. repeat(auto-fill, minmax(120px, 1fr)) skapar så många kolumner på minst 120px som får plats, vilket ger ett responsivt kortrutnät utan en enda mediefråga.

Elementen fyller cellerna i tur och ordning, om du inte placerar dem: grid-column: span 2 gör ett element två kolumner brett, och grid-column: 1 / -1 sträcker det över hela raden.

Med grid-template-areas kan du rita layouten med namn. Skriv en rad i rutnätet per textrad, till exempel header header och sedan nav main, och ge elementen grid-area: header eller grid-area: main. En punkt markerar en tom cell. Alla rader måste ha lika många celler och varje namn måste bilda en rektangel; annars varnar verktyget dig.