Splendid layouts

Create vertical layouts with Flexbox

There are many advantages of using display:flex over display:block.

index.html
<div class="vertical">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
One
Two
Three

Adjust the space between items easily

With vertical, you can adjust space between items with gap. It’s more intuitive than margin because there’s no need to deal with “margin collapse”.

index.html
<div class="vertical gap-8">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
One
Two
Three

Easily align items to the left, center, or right.

You can use align-items to shift all items to the left, center, or right.

Stretch
One
Two
Three
Start
One
Two
Three
Center
One
Two
Three
End
One
Two
Three

Easily align individual items to as well

You can use align-self to shift individual child items to the left, center, or right too.

index.html
<div class="vertical">
  <div>Stretch</div>
  <div class="self-start">Start</div>
  <div class="self-center">Center</div>
  <div class="self-end">End</div>
</div>
Stretch
Start
Center
End