Flexbox

Utility class to display and manage flex layout and container

Read all flexbox utilities

Enable flex behaviors

Use this utility to make a flexbox container. The direct children will be transformed into flex items & can be altered with supplementary properties.

<div class="flex gap-1">
  <p class="font-medium">Written in semantic HTML</p>
  <p class="subtitle">Written in semantic</p>
</div>

danger

Note that: gap property might have compatibility issues in some browsers. Check Can I Use website for more information.

Flex Direction

Establish the direction of the flex items. Since the default direction is a row, you can leave out writing flex-row in common use case unless you need to write this value.

Use flex-[direction]-reverse to display the contrary direction of flex items.

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

Justify content

Define the alignment and distribute of available free space of flexbox items in main axis.

.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

Align items

Define the alignment and distribute of available free space of flexbox items in cross axis.

.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}

Align content

Define the alignment of rows in multiple lines of flexbox items where the flex-wrap is set.

.content-center {
  align-content: center;
}
.content-start {
  align-content: flex-start;
}
.content-end {
  align-content: flex-end;
}
.content-between {
  align-content: space-between;
}
.content-around {
  align-content: space-around;
}
.content-evenly {
  align-content: space-evenly;
}

Flex-wrap

Transform flexbox items into single line or on multiple lines within a flexbox container.

.flex-wrap {
  flex-wrap: wrap;
}
.flex-no-wrap {
  flex-wrap: nowrap;
}

Gap

Controls the gutter or space between flexbox items

.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}