Flexbox en grid cheat sheet (interactief) met Tailwind | We.Inc
Elke flexbox- en CSS grid-eigenschap op een live container die u kunt aanpassen, een bouwer voor grid-template-areas, een keuzehulp voor flex of grid en Tailwind-classes.
Flexbox en grid cheat sheet
Flexbox legt items in één richting uit, een rij of een kolom, en is het beste voor werkbalken, navigatiebalken en centreren. Grid plaatst items tegelijk in rijen en kolommen en past bij paginalayouts en kaartgalerijen. Zet display: flex of display: grid op de ouder en gebruik dan de eigenschappen hieronder; elke eigenschap werkt hier een live container bij.
Flexbox of grid?
Layout
Keuze
Eén ding centreren in een vak
Allebei: grid met place-items: center is het kortst
Een rij knoppen of navigatielinks
Flexbox
Items met onbekende breedte die moeten doorlopen
Flexbox met flex-wrap
Kaarten in gelijke kolommen
Grid met repeat(auto-fill, minmax())
Header, zijbalk, hoofdinhoud, footer
Grid met grid-template-areas
Items uitlijnen over rijen en kolommen
Grid
Twee live containers, één flex en één grid, met een bedieningselement voor elke containereigenschap en voor één gekozen item. Elke wijziging toont de CSS en de Tailwind-class. Daaronder tekent u een paginalayout in de bouwer voor grid-template-areas en kopieert u het resultaat. De naslagtabellen printen netjes.
Gebruik de flexbox-bediening om de container te wijzigen en kies dan een item om grow, shrink, basis, order en align-self te proberen.
Doe hetzelfde in de grid-speeltuin, inclusief spans die één item over kolommen of rijen uitrekken.
Kies in de areas-bouwer een naam voor een gebied en klik op cellen om ze in te kleuren. De CSS voor de container en elk gebied verschijnt eronder.
Druk op Afdrukken om de eigenschappentabellen op papier of als PDF te krijgen.
Begin met gap voor ruimte tussen items in plaats van marges. Het voegt alleen ruimte tussen items toe, nooit aan de buitenranden.
flex: 1 op elk item maakt kolommen van gelijke breedte die nog steeds op hun inhoud reageren; grid met 1fr-kolommen negeert de breedte van de inhoud.
Gebruik order en grid-plaatsing alleen voor visuele aanpassingen. Gebruikers van toetsenbord en schermlezer volgen de bronvolgorde, dus de volgorde in de HTML moet nog steeds logisch zijn.
minmax(0, 1fr) in plaats van 1fr voorkomt dat een lang woord of een brede afbeelding een gridkolom breder maakt dan zijn aandeel.
Veelgestelde vragen
Wat is het verschil tussen justify-content en align-items?
justify-content werkt langs de hoofdas, die in een flex-rij van links naar rechts loopt. align-items werkt er dwars op, in een rij van boven naar beneden. Zet flex-direction op column en de twee wisselen van fysieke richting, en daarom lijkt centreren soms de verkeerde eigenschap te gebruiken.
Waarom doet justify-content niets?
Het heeft alleen effect als er ruimte over is op de hoofdas. Als een item flex-grow: 1 heeft of de items de rij vullen, is er niets meer te verdelen. In grid verplaatst justify-content de hele set tracks, terwijl justify-items de items binnen hun eigen cellen uitlijnt.
Hoe werken grid-template-areas?
U tekent de layout als strings, één per rij, met een naam voor elke cel, zoals "header header" "side main". Elk kind claimt dan een naam met grid-area: header. Gebieden moeten rechthoeken vormen, en een punt markeert een lege cel.
Kan ik flexbox binnen grid gebruiken?
Ja, en dat is gebruikelijk. Grid plaatst de grote gebieden of kaarten, en flexbox schikt de inhoud binnen elk ervan, zoals een icoon naast een label of een footer die onderaan een kaart vastzit.
Wordt gap ondersteund in flexbox?
Ja. Alle huidige grote browsers ondersteunen gap in flex-containers en in grid, dus de oude truc met negatieve marges op de container is niet meer nodig.
De twee assen
Elke flex-container heeft een hoofdas die wordt bepaald door flex-direction en een dwarsas die er haaks op staat. Eigenschappen die met justify beginnen werken op de hoofdas en eigenschappen die met align beginnen werken op de dwarsas. Zodra dat duidelijk is, worden de meeste flexbox-puzzels een kwestie van welke as u bedoelt.
Grid heeft in plaats daarvan een vast paar assen: inline (meestal horizontaal) en block (meestal verticaal). justify-* lijnt uit langs de inline-as en align-* langs de block-as, zowel voor het hele grid als voor items binnen hun cellen.
Hoe flex-items hun grootte bepalen
Elk item begint op zijn flex-basis, of op de grootte van zijn inhoud als basis auto is. Als er op de regel ruimte over is, wordt die verdeeld naar verhouding van flex-grow. Als de regel te vol is, krimpen items naar verhouding van flex-shrink vermenigvuldigd met hun basis.
De shorthand flex: 1 betekent grow 1, shrink 1, basis 0%, dus elk item wordt even breed, wat de inhoud ook is. flex: auto houdt de grootte van de inhoud als vertrekpunt, dus langere labels krijgen bredere vakken.
Responsive grids zonder media queries
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) past zoveel kolommen van minstens 220 pixels in als de container toelaat en rekt ze uit om de rij te vullen. Kaarten herschikken zich van één kolom op een telefoon tot vier of vijf op een breed scherm, zonder breakpoints.
auto-fit gedraagt zich hetzelfde totdat er minder items dan kolommen zijn: auto-fill houdt de lege kolommen, terwijl auto-fit ze laat inklappen zodat de bestaande items zich over de rij uitrekken.