Styra Layout Med Flexbox-verktyg
Tailwind CSS tillhandahåller verktygsklasser som gör det enkelt att skapa flexibla och responsiva layouter med Flexbox. Dessa verktyg ger dig möjlighet att styra utformning och justering av element inom en behållare.
Ställa in display till Flex
För att ange att ett element ska använda Flexbox för sin layout kan du använda klassen flex. Denna klass sätter egenskapen display till flex.
index.html
I det här exemplet gör flex-klassen på föräldra-div att den blir en flex-behållare, och de underordnade div-elementen (flex-1) fördelar utrymmet lika.
Kontrollera flexriktning
Flexriktning-klasser gör det möjligt att styra riktningen som flexobjekten placeras i behållaren. Du kan ställa in riktningen till rad (standard), kolumn, rad omvänd eller kolumn omvänd med följande klasser:
| Klass | Beskrivning |
|---|---|
flex-row | Placerar objekt i en rad (standard). |
flex-col | Placerar objekt i en kolumn. |
flex-row-reverse | Placerar objekt i en omvänd rad. |
flex-col-reverse | Placerar objekt i en omvänd kolumn. |
index.html
I det här exemplet ställer klassen flex-col in flex-riktningen till kolumn, vilket staplar objekten vertikalt.
Justera objekt horisontellt
Justify-content-verktygen styr den horisontella justeringen av objekt inom en flex-behållare. Tillgängliga klasser är:
| Class | Description |
|---|---|
justify-start | Aligns items to the start. |
justify-center | Aligns items to the center. |
justify-end | Aligns items to the end. |
justify-between | Distributes items evenly with space between them. |
justify-around | Distributes items evenly with space around them. |
justify-evenly | Distributes items evenly with equal space around them. |
index.html
I det här exemplet centrerar klassen justify-center objekten horisontellt inom flex-behållaren.
Vertikal justering av objekt
Align-items-verktygen styr den vertikala justeringen av objekt inom en flex-behållare. Tillgängliga klasser är:
| Class | Description |
|---|---|
items-start | Aligns items to the start. |
items-center | Aligns items to the center. |
items-end | Aligns items to the end. |
items-baseline | Aligns items along their baseline. |
items-stretch | Stretches items to fill the container (default). |
index.html
I det här exemplet centrerar klassen items-center objekten vertikalt inom flex-behållaren.
Obs
Om du letar efter något specifikt, följ länken.
1. Vilken klass sätter egenskapen display till flex?
2. Hur ställer du in flex-riktningen till kolumn?
3. Vilken klass centrerar objekt horisontellt i en flex-behållare?
4. Vilken hjälputilitet centrerar objekt vertikalt i en flex-behållare?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 3.57Styra Layout Med Flexbox-verktyg
Svep för att visa menyn
Tailwind CSS tillhandahåller verktygsklasser som gör det enkelt att skapa flexibla och responsiva layouter med Flexbox. Dessa verktyg ger dig möjlighet att styra utformning och justering av element inom en behållare.
Ställa in display till Flex
För att ange att ett element ska använda Flexbox för sin layout kan du använda klassen flex. Denna klass sätter egenskapen display till flex.
index.html
I det här exemplet gör flex-klassen på föräldra-div att den blir en flex-behållare, och de underordnade div-elementen (flex-1) fördelar utrymmet lika.
Kontrollera flexriktning
Flexriktning-klasser gör det möjligt att styra riktningen som flexobjekten placeras i behållaren. Du kan ställa in riktningen till rad (standard), kolumn, rad omvänd eller kolumn omvänd med följande klasser:
| Klass | Beskrivning |
|---|---|
flex-row | Placerar objekt i en rad (standard). |
flex-col | Placerar objekt i en kolumn. |
flex-row-reverse | Placerar objekt i en omvänd rad. |
flex-col-reverse | Placerar objekt i en omvänd kolumn. |
index.html
I det här exemplet ställer klassen flex-col in flex-riktningen till kolumn, vilket staplar objekten vertikalt.
Justera objekt horisontellt
Justify-content-verktygen styr den horisontella justeringen av objekt inom en flex-behållare. Tillgängliga klasser är:
| Class | Description |
|---|---|
justify-start | Aligns items to the start. |
justify-center | Aligns items to the center. |
justify-end | Aligns items to the end. |
justify-between | Distributes items evenly with space between them. |
justify-around | Distributes items evenly with space around them. |
justify-evenly | Distributes items evenly with equal space around them. |
index.html
I det här exemplet centrerar klassen justify-center objekten horisontellt inom flex-behållaren.
Vertikal justering av objekt
Align-items-verktygen styr den vertikala justeringen av objekt inom en flex-behållare. Tillgängliga klasser är:
| Class | Description |
|---|---|
items-start | Aligns items to the start. |
items-center | Aligns items to the center. |
items-end | Aligns items to the end. |
items-baseline | Aligns items along their baseline. |
items-stretch | Stretches items to fill the container (default). |
index.html
I det här exemplet centrerar klassen items-center objekten vertikalt inom flex-behållaren.
Obs
Om du letar efter något specifikt, följ länken.
1. Vilken klass sätter egenskapen display till flex?
2. Hur ställer du in flex-riktningen till kolumn?
3. Vilken klass centrerar objekt horisontellt i en flex-behållare?
4. Vilken hjälputilitet centrerar objekt vertikalt i en flex-behållare?
Tack för dina kommentarer!
