Layout with Flexbox
Svep för att visa menyn
Tailwind provides utility classes to build flexible layouts using Flexbox.
Enable Flexbox
<div className="flex">
<div>Item 1</div>
<div>Item 2</div>
</div>
flex: enables flex layout.
Direction
<div className="flex flex-col">
<div>Item 1</div>
<div>Item 2</div>
</div>
flex-col: stacks items vertically.
Align Items
<div className="flex items-center">
<div>Item</div>
</div>
items-center: aligns items vertically.
Justify Content
<div className="flex justify-between">
<div>Left</div>
<div>Right</div>
</div>
justify-between: spreads items horizontally.
Gap Between Items
<div className="flex gap-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
gap-4: adds space between items.
Use Flexbox utilities to control direction, alignment, and spacing in layouts.
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
Layout with Flexbox
Tailwind provides utility classes to build flexible layouts using Flexbox.
Enable Flexbox
<div className="flex">
<div>Item 1</div>
<div>Item 2</div>
</div>
flex: enables flex layout.
Direction
<div className="flex flex-col">
<div>Item 1</div>
<div>Item 2</div>
</div>
flex-col: stacks items vertically.
Align Items
<div className="flex items-center">
<div>Item</div>
</div>
items-center: aligns items vertically.
Justify Content
<div className="flex justify-between">
<div>Left</div>
<div>Right</div>
</div>
justify-between: spreads items horizontally.
Gap Between Items
<div className="flex gap-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
gap-4: adds space between items.
Use Flexbox utilities to control direction, alignment, and spacing in layouts.
Tack för dina kommentarer!
