Creëer perfecte Flexbox-lay-outs
Visualiseer, pas aan en genereer CSS-flexboxcode met onze intuïtieve interface voor slepen en neerzetten.
Eigenschappen van containers
Item eigenschappen
Preview
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Populaire Flexbox-voorinstellingen
Horizontaal en verticaal centreren
Perfect voor het centreren van een logo, knop of welk element dan ook, zowel horizontaal als verticaal.
Gelijke afstand
Creëer een gelijke afstand tussen elementen met ruimte ertussen of ruimte rondom.
Verticaal menu
Bouw een verticaal navigatiemenu met consistente afstand en uitlijning.
Responsief raster
Maak een responsieve rasterindeling die items omwikkelt op basis van beschikbare ruimte.
Held Banner
Hoofdtitel
Heldensectie met oproep tot actie
Ontwerp een heldenbanner met titel, ondertiteling en een call-to-action-knop.
Footer lay-out
Company
About Us
Careers
Support
Helpcentrum
Neem contact met ons op
© Flexbox-generator 2023
Bouw een responsieve voettekst met kolommen die op kleinere schermen worden gestapeld.
Voorbeelden uit de praktijk
Navigatiebalk
Een gemeenschappelijke lay-out van de navigatiebalk met logo aan de linkerkant, menu-items in het midden en een winkelwagenpictogram aan de rechterkant.
Card Grid
Titel van de kaart
Kaart beschrijving tekst hier
Titel van de kaart
Kaart beschrijving tekst hier
Titel van de kaart
Kaart beschrijving tekst hier
Een responsief kaartraster dat zich aanpast aan verschillende schermformaten met behulp van flexbox-eigenschappen.
Artikel lay-out
Titel van het artikel
geplaatst op 1 januari 2023 · 5 minuten lezen
Inhoud van het artikel hier. Dit kan een korte samenvatting zijn of de volledige artikeltekst. Flexbox helpt de afbeelding en tekst op een visueel aantrekkelijke manier op elkaar uit te lijnen.
Een gemeenschappelijke artikellay-out met een afbeelding aan de linkerkant en tekstinhoud aan de rechterkant, gestapeld op mobiele apparaten.
Dashboard lay-out
Een dashboardindeling met koptekst, zijbalk, hoofdinhoudsgebied en voettekst met behulp van flexbox voor zowel horizontale als verticale uitlijning.
Basisprincipes van Flexbox
Wat is Flexbox?
Flexible Box Layout, algemeen bekend als Flexbox, is een CSS3-lay-outmodel dat een efficiënte manier biedt om ruimte te verdelen en uit te lijnen tussen items in een container, zelfs als hun grootte onbekend of dynamisch is.
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
Sleutelbegrippen:Flexbox introduceert twee hoofdconcepten: deFlexibele container and the Flex-artikelen. De container is het bovenliggende element en de items zijn de directe onderliggende elementen.
Hoofdas versus dwarsas
Flexbox-lay-outs zijn gebaseerd op twee assen: demain axis and the dwarsas.
-
Hoofdas:De primaire as waarlangs flex-items zijn ingedeeld. Gedefinieerd door
flex-direction. - Dwars-as:De as loodrecht op de hoofdas. De richting is afhankelijk van de richting van de hoofdas.
Eigenschappen van containers
| Property | Description |
|---|---|
display |
Definieert een flexcontainer; inline of blok, afhankelijk van de gegeven waarde. |
flex-direction |
Hiermee stelt u de hoofdas vast en definieert u daarmee de richting waarin flexitems in de flexcontainer worden geplaatst. |
flex-wrap |
Standaard proberen flex-items allemaal op één regel te passen. U kunt dat wijzigen en de items naar behoefte laten inpakken met deze eigenschap. |
justify-content |
Lijnt flexartikelen uit langs de hoofdas van de huidige lijn van de flexcontainer. |
align-items |
Lijnt flexitems uit langs de dwarsas van de huidige lijn van de flexcontainer. |
align-content |
Lijnt de lijnen van een flexcontainer uit wanneer er extra ruimte is in de dwarsas. |
Item eigenschappen
| Property | Description |
|---|---|
order |
Flex-items worden standaard ingedeeld in de bronvolgorde. DeorderDe eigenschap bepaalt de volgorde waarin ze in de flexcontainer worden weergegeven. |
flex-grow |
Definieert de mogelijkheid voor een flex-item om te groeien als dat nodig is. Het accepteert een eenheidsloze waarde die als een verhouding dient. |
flex-shrink |
Definieert de mogelijkheid voor een flex-item om indien nodig te verkleinen. |
flex-basis |
Definieert de initiële grootte van een flex-item voordat de beschikbare ruimte wordt verdeeld op basis van de flexfactoren. |
align-self |
Staat de standaarduitlijning toe (of degene die is gespecificeerd dooralign-items) die worden overschreven voor afzonderlijke flexartikelen. |
Related Tools
CSS3 Overgang Generator
Vloeiende overgang van dekking
CSS-minifier
Comprimeer en optimaliseer uw CSS-code met professionele precisie
Online tekst schaduw CSS-generator
Creëer verbluffende teksteffecten met verloop voor uw website
CSS-minifier
Comprimeer en optimaliseer uw CSS-code met professionele precisie
SHA-512/224 Hasj-calculator
Genereer snel en eenvoudig SHA-512/224 hashes
Vertrouwen interval rekenmachine
Bereken betrouwbaarheidsintervallen voor uw monstergegevens met precisie en gemak.