⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

Flexbox-kolommen met gelijke breedte — CSS-generator

Bouw visueel een CSS-flexbox-indeling: flex-direction, justify-content, align-items, flex-wrap en gap op de container, plus flex-grow, flex-shrink en flex-basis per kind, allemaal met een live preview en kopieerbare CSS.

Verwerken... 0%

Resultaat

Deze pagina opent de generator met flex-grow: 1 al ingesteld op alle drie de voorbeeldboxen. Bekijk ze: in plaats van te verkleinen om bij de inhoud te passen, claimt elk vak een identiek deel van de overgebleven ruimte in de rij, wat het hele recept is voor flexibele kolommen van gelijke breedte - geen percentagebreedtes, geen calc(), geen vaste pixelwiskunde om gesynchroniseerd te houden.

flex-grow: 1 vertelt een kind dat het moet groeien, en als je dit op elk kind in de rij zet, groeien ze allemaal evenveel, zodat ze dezelfde breedte krijgen, ongeacht hoeveel er zijn of welke inhoud erin zit. Voeg een vak toe of verwijder het met de onderstaande besturingselementen en de resterende kolommen worden onmiddellijk opnieuw verdeeld om gelijk te blijven. Pas het formaat van een browservenster aan over deze lay-out in productie en het gedraagt ​​zich op dezelfde manier.

Dit is het patroon achter kaartrasters van gelijke hoogte, prijstabelkolommen en gelijkmatig verdeelde voettekstsecties. Geef één kolom meer ruimte door de flex-grow boven de andere te verhogen, of kopieer het onderstaande CSS-blok precies zoals gegenereerd voor een schone, gelijke verdeling.

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • Containerbedieningselementen: flex-direction, justify-content, align-items, flex-wrap en een gap-invoer in pixels, live toegepast op de preview.
  • Standaard drie kleurgecodeerde onderliggende vakken (optellen tot acht, verwijderen tot twee), elk met zijn eigen velden voor flex-grow, flex-shrink en flex-basis.
  • Kopieerbaar CSS-blok met een .flex-containerregel plus één .flex-item-N-regel per kind met niet-standaard flex-eigenschappen.

Belangrijkste voordelen

✓ Elke containercontrole en de flex-grow, flex-shrink en flex-basis van elk kind updaten drie genummerde voorbeeldvakken live, zodat u precies ziet wat uw flexbox-regels doen voordat u een stylesheet aanraakt.
✓ De generator drukt alleen onderliggende regels af die daadwerkelijk verschillen van de CSS-standaardwaarden, zodat de gekopieerde code kort en leesbaar blijft in plaats van dat flex-grow: 0 in elk vak wordt herhaald.
✓ Vooraf ingestelde pagina's lossen de lay-outs op waarnaar mensen op naam zoeken: een div centreren, een logo-links-rechts navigatiebalk en flexibele kolommen van gelijke breedte - open er één en de tool is al geconfigureerd.

Toepassingen

  • • Verkrijg de exacte CSS om een div zowel horizontaal als verticaal te centreren door te kijken hoe de justify-content en align-items werken in live preview-vakken.
  • • Bouw een navigatiebalkindeling met logo links en links rechts met ruimte tussen en uitlijnitems: centreren en kopieer vervolgens de container-CSS rechtstreeks naar uw headercomponent.
  • • Vergelijk de ruimte tussen, de ruimte eromheen en de ruimte gelijkmatig naast elkaar op dezelfde drie vakken, in plaats van te raden welke overeenkomt met de gewenste afstand.