Lay-outbeheer met Flexbox-hulpprogramma's
Tailwind CSS biedt hulpprogrammaklassen waarmee flexibele en responsieve lay-outs eenvoudig kunnen worden gemaakt met Flexbox. Deze utilities maken het mogelijk om het ontwerp en de uitlijning van elementen binnen een container te beheren.
Weergave instellen op Flex
Om een element Flexbox te laten gebruiken voor de lay-out, kan de klasse flex worden gebruikt. Deze klasse stelt de eigenschap display in op flex.
index.html
In dit voorbeeld maakt de flex-klasse op de ouder-div er een flex-container van, en de kind-divs (flex-1) verdelen de ruimte gelijkmatig.
Flexrichting beheren
Flexrichting-hulpprogramma's bieden controle over de richting waarin de flex-items in de container worden geplaatst. De richting kan worden ingesteld op rij (standaard), kolom, rij-omgekeerd of kolom-omgekeerd met de volgende klassen:
| Class | Description |
|---|---|
flex-row | Places items in a row (default). |
flex-col | Places items in a column. |
flex-row-reverse | Places items in a reversed row. |
flex-col-reverse | Places items in a reversed column. |
index.html
In dit voorbeeld stelt de flex-col klasse de flexrichting in op kolom, waardoor items verticaal worden gestapeld.
Items horizontaal uitlijnen
De justify-content utilities regelen de horizontale uitlijning van items binnen een flexcontainer. De beschikbare klassen zijn:
| Class | Description |
|---|---|
justify-start | Lijnt items uit aan het begin. |
justify-center | Lijnt items uit in het midden. |
justify-end | Lijnt items uit aan het einde. |
justify-between | Verdeelt items gelijkmatig met ruimte ertussen. |
justify-around | Verdeelt items gelijkmatig met ruimte eromheen. |
justify-evenly | Verdeelt items gelijkmatig met gelijke ruimte eromheen. |
index.html
In dit voorbeeld centreert de klasse justify-center de items horizontaal binnen de flex-container.
Items Verticaal Uitlijnen
De utilities voor het uitlijnen van items regelen de verticale uitlijning van items binnen een flex-container. De beschikbare klassen zijn:
| Klasse | Beschrijving |
|---|---|
items-start | Lijnt items uit aan het begin. |
items-center | Lijnt items uit in het midden. |
items-end | Lijnt items uit aan het einde. |
items-baseline | Lijnt items uit langs hun basislijn. |
items-stretch | Rekt items uit om de container te vullen (standaard). |
index.html
In dit voorbeeld centreert de klasse items-center de items verticaal binnen de flex-container.
Opmerking
Als u naar iets specifieks zoekt, volg dan de link.
1. Welke klasse stelt de eigenschap display in op flex?
2. Hoe stel je de flex-richting in op kolom?
3. Welke klasse centreert items horizontaal in een flex-container?
4. Welke utility-klasse centreert items verticaal in een flex-container?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you show me an example of using these Tailwind Flexbox classes?
What are some common use cases for Flexbox in Tailwind CSS?
How do I combine multiple flex utilities for more complex layouts?
Awesome!
Completion rate improved to 3.57Lay-outbeheer met Flexbox-hulpprogramma's
Veeg om het menu te tonen
Tailwind CSS biedt hulpprogrammaklassen waarmee flexibele en responsieve lay-outs eenvoudig kunnen worden gemaakt met Flexbox. Deze utilities maken het mogelijk om het ontwerp en de uitlijning van elementen binnen een container te beheren.
Weergave instellen op Flex
Om een element Flexbox te laten gebruiken voor de lay-out, kan de klasse flex worden gebruikt. Deze klasse stelt de eigenschap display in op flex.
index.html
In dit voorbeeld maakt de flex-klasse op de ouder-div er een flex-container van, en de kind-divs (flex-1) verdelen de ruimte gelijkmatig.
Flexrichting beheren
Flexrichting-hulpprogramma's bieden controle over de richting waarin de flex-items in de container worden geplaatst. De richting kan worden ingesteld op rij (standaard), kolom, rij-omgekeerd of kolom-omgekeerd met de volgende klassen:
| Class | Description |
|---|---|
flex-row | Places items in a row (default). |
flex-col | Places items in a column. |
flex-row-reverse | Places items in a reversed row. |
flex-col-reverse | Places items in a reversed column. |
index.html
In dit voorbeeld stelt de flex-col klasse de flexrichting in op kolom, waardoor items verticaal worden gestapeld.
Items horizontaal uitlijnen
De justify-content utilities regelen de horizontale uitlijning van items binnen een flexcontainer. De beschikbare klassen zijn:
| Class | Description |
|---|---|
justify-start | Lijnt items uit aan het begin. |
justify-center | Lijnt items uit in het midden. |
justify-end | Lijnt items uit aan het einde. |
justify-between | Verdeelt items gelijkmatig met ruimte ertussen. |
justify-around | Verdeelt items gelijkmatig met ruimte eromheen. |
justify-evenly | Verdeelt items gelijkmatig met gelijke ruimte eromheen. |
index.html
In dit voorbeeld centreert de klasse justify-center de items horizontaal binnen de flex-container.
Items Verticaal Uitlijnen
De utilities voor het uitlijnen van items regelen de verticale uitlijning van items binnen een flex-container. De beschikbare klassen zijn:
| Klasse | Beschrijving |
|---|---|
items-start | Lijnt items uit aan het begin. |
items-center | Lijnt items uit in het midden. |
items-end | Lijnt items uit aan het einde. |
items-baseline | Lijnt items uit langs hun basislijn. |
items-stretch | Rekt items uit om de container te vullen (standaard). |
index.html
In dit voorbeeld centreert de klasse items-center de items verticaal binnen de flex-container.
Opmerking
Als u naar iets specifieks zoekt, volg dan de link.
1. Welke klasse stelt de eigenschap display in op flex?
2. Hoe stel je de flex-richting in op kolom?
3. Welke klasse centreert items horizontaal in een flex-container?
4. Welke utility-klasse centreert items verticaal in een flex-container?
Bedankt voor je feedback!
