Kontrollere Oppsett med Flexbox-Verktøy
Tailwind CSS tilbyr verktøyklasser som gjør det enkelt å lage fleksible og responsive oppsett ved hjelp av Flexbox. Disse verktøyene gir deg kontroll over utforming og justering av elementer i en beholder.
Angi visning til Flex
For å angi at et element skal bruke Flexbox for oppsettet, kan du bruke klassen flex. Denne klassen setter egenskapen display til flex.
index.html
I dette eksemplet gjør flex-klassen på foreldreelementet div det til en flex-container, og de underordnede div-ene (flex-1) vil fordele plassen likt.
Kontroll av flex-retning
Verktøy for flex-retning lar deg styre retningen flex-elementene plasseres i containeren. Du kan angi retningen til rad (standard), kolonne, rad-revers eller kolonne-revers ved å bruke følgende klasser:
| 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
I dette eksemplet setter klassen flex-col fleksretningen til kolonne, slik at elementene stables vertikalt.
Justering av elementer horisontalt
Justify-content-verktøyene styrer den horisontale justeringen av elementer i en flex-container. Tilgjengelige klasser er:
| 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 dette eksempelet sentrerer klassen justify-center elementene horisontalt i flex-beholderen.
Vertikal justering av elementer
Verktøyklassene for align-items styrer den vertikale justeringen av elementer i en flex-beholder. Tilgjengelige klasser er:
| Class | Description |
|---|---|
items-start | Plasserer elementene ved starten. |
items-center | Plasserer elementene i midten. |
items-end | Plasserer elementene ved slutten. |
items-baseline | Plasserer elementene langs deres grunnlinje. |
items-stretch | Strekker elementene for å fylle beholderen (standard). |
index.html
I dette eksemplet sentrerer klassen items-center elementene vertikalt i flex-beholderen.
Merk
Hvis du leter etter noe spesifikt, vennligst følg lenken.
1. Hvilken klasse setter display-egenskapen til flex?
2. Hvordan setter du flex-retningen til kolonne?
3. Hvilken klasse sentrerer elementer horisontalt i en flex container?
4. Hvilket hjelpeklasse sentrerer elementer vertikalt i en flex container?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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.57Kontrollere Oppsett med Flexbox-Verktøy
Sveip for å vise menyen
Tailwind CSS tilbyr verktøyklasser som gjør det enkelt å lage fleksible og responsive oppsett ved hjelp av Flexbox. Disse verktøyene gir deg kontroll over utforming og justering av elementer i en beholder.
Angi visning til Flex
For å angi at et element skal bruke Flexbox for oppsettet, kan du bruke klassen flex. Denne klassen setter egenskapen display til flex.
index.html
I dette eksemplet gjør flex-klassen på foreldreelementet div det til en flex-container, og de underordnede div-ene (flex-1) vil fordele plassen likt.
Kontroll av flex-retning
Verktøy for flex-retning lar deg styre retningen flex-elementene plasseres i containeren. Du kan angi retningen til rad (standard), kolonne, rad-revers eller kolonne-revers ved å bruke følgende klasser:
| 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
I dette eksemplet setter klassen flex-col fleksretningen til kolonne, slik at elementene stables vertikalt.
Justering av elementer horisontalt
Justify-content-verktøyene styrer den horisontale justeringen av elementer i en flex-container. Tilgjengelige klasser er:
| 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 dette eksempelet sentrerer klassen justify-center elementene horisontalt i flex-beholderen.
Vertikal justering av elementer
Verktøyklassene for align-items styrer den vertikale justeringen av elementer i en flex-beholder. Tilgjengelige klasser er:
| Class | Description |
|---|---|
items-start | Plasserer elementene ved starten. |
items-center | Plasserer elementene i midten. |
items-end | Plasserer elementene ved slutten. |
items-baseline | Plasserer elementene langs deres grunnlinje. |
items-stretch | Strekker elementene for å fylle beholderen (standard). |
index.html
I dette eksemplet sentrerer klassen items-center elementene vertikalt i flex-beholderen.
Merk
Hvis du leter etter noe spesifikt, vennligst følg lenken.
1. Hvilken klasse setter display-egenskapen til flex?
2. Hvordan setter du flex-retningen til kolonne?
3. Hvilken klasse sentrerer elementer horisontalt i en flex container?
4. Hvilket hjelpeklasse sentrerer elementer vertikalt i en flex container?
Takk for tilbakemeldingene dine!
