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

3 items

Preview

Item 1
Item 2
Item 3
.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; }
Gegenereerde CSS-code

Populaire Flexbox-voorinstellingen

Horizontaal en verticaal centreren

Content

Perfect voor het centreren van een logo, knop of welk element dan ook, zowel horizontaal als verticaal.

Gelijke afstand

Item 1
Item 2
Item 3

Creëer een gelijke afstand tussen elementen met ruimte ertussen of ruimte rondom.

Verticaal menu

Home
About
Contact

Bouw een verticaal navigatiemenu met consistente afstand en uitlijning.

Responsief raster

Box 1
Box 2
Box 3
Box 4
Box 5

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

Logo
Home
Products
About
Contact

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

Header
Sidebar
Hoofdinhoud
Footer

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 doorflex-direction.
  • Dwars-as:De as loodrecht op de hoofdas. De richting is afhankelijk van de richting van de hoofdas.
Hoofdas →
← Dwarsas
Start
Main
End

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

Creëer perfecte Flexbox-lay-outs

Visualiseer, pas aan en genereer CSS-flexboxcode met onze intuïtieve interface voor slepen en neerzetten.

Stylus naar CSS Converter

Transformeer uw SCSS-code in CSS. Snel, gemakkelijk en veilig.

SCSS naar CSS Converter

Transformeer uw SCSS-code in CSS. Snel, gemakkelijk en veilig.

Aangepaste disclaimers maken

Genereer uitgebreide disclaimers die zijn afgestemd op uw website, app of service.

Huidige Converter

Zet elektrische stroom met precisie en gemak om tussen verschillende eenheden

Kansrekening

Bereken kansen voor verschillende scenario's met onze uitgebreide kansrekening.