Flexbox

Item 1 Item 2 Item 3

Code Example

<div class="flex gap3">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
</div>

Flex Center

Center items horizontally and vertically.

Item 1 Item 2 Item 3 Item 4 Item 5

Code Example

<div class="flex flex-center gap4 p4 bg-yellow b-br2 h5 m-y4">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
	<span>Item 4</span>
	<span>Item 5</span>
</div>

<div class="flex flex-center flex-col gap2 p4 bg-yellow b-br2 h5 m-y4">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
	<span>Item 4</span>
	<span>Item 5</span>
</div>

Flex Direction

Row (Default) Item 1 Item 2 Item 3

Column Item 1 Item 2 Item 3

Code Example

<div class="flex flex-row gap3 m-y4">
	<span>Row (Default)</span>
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
</div>

<div class="flex flex-col gap3 m-y4">
	<span>Column</span>
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
</div>

Flex Gap

Item 1 Item 2 Item 3

Code Example

<div class="flex gap3 m-y4">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
</div>

<div class="flex gap4 m-y4">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
</div>

<div class="flex gap5 m-y4">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
</div>

<div class="flex gap6 m-y4">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
</div>

Flex Wrap

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14

No-Wrap Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10

Code Example

<div class="flex flex-wrap gap4 m-y4">
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
	<span>Item 4</span>
	<span>Item 5</span>
	<span>Item 6</span>
	<span>Item 7</span>
	<span>Item 8</span>
	<span>Item 9</span>
	<span>Item 10</span>
	<span>Item 11</span>
	<span>Item 12</span>
	<span>Item 13</span>
	<span>Item 14</span>
</div>

<div class="flex flex-nowrap gap4 m-y4">
	<span>No-Wrap</span>
	<span>Item 1</span>
	<span>Item 2</span>
	<span>Item 3</span>
	<span>Item 4</span>
	<span>Item 5</span>
	<span>Item 6</span>
	<span>Item 7</span>
	<span>Item 8</span>
	<span>Item 9</span>
	<span>Item 10</span>
</div>