Vertical
Vertical lets you lay things out vertically with Flexbox.
Create vertical layouts with Flexbox
There are many advantages of using display:flex over display:block.
<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”.
<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.
<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
Basic Usage
Vertical lets you lay things out vertically. It’s basically just display: flex + flex-flow: column with a couple of enhancements.
<div class="Vertical"> <div>One</div> <div>Two</div> <div>Three</div></div>One
Two
Three
Changing Gap
You can change the gap between items with the gap property or the --gap variable.
<div class="Vertical gap-8"> <div>One</div> <div>Two</div> <div>Three</div></div><div class="Vertical" style="--gap:2rem"> <div>One</div> <div>Two</div> <div>Three</div></div>One
Two
Three
Horizontal Alignment
Vertical uses align-items to align items horizontally.
<div class="Vertical items-stretch">...</div><div class="Vertical items-start">...</div><div class="Vertical items-center">...</div><div class="Vertical items-end">...</div><div class="Vertical" style="align-items: stretch">...</div><div class="Vertical" style="align-items: start">...</div><div class="Vertical" style="align-items: center">...</div><div class="Vertical" style="align-items: end">...</div>Stretch
One
Two
Three
Start
One
Two
Three
Center
One
Two
Three
End
One
Two
Three
Aligning children items
Like SingleCol, you can use align-self to align each child item individually.
<div class="Vertical"> <div>Default</div> <div class="self-start">Start</div> <div class="self-center">Center</div> <div class="self-end">End</div></div>Default
Start
Center
End
Expanding Items with flex-grow
You can use flex-grow to expand items when there is sufficient height to expand. This technique is used in Shell-simple to expand Content.
<div class="GridAutoFr"> <div class="Vertical"> <div class="flex-grow">Top</div> <div>Bottom</div> </div> <div>...</div></div>Top
Bottom
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure facere libero odio reiciendis corporis excepturi ad quos beatae sit dicta reprehenderit atque veniam non quam at, cupiditate, maiores vero magnam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure facere libero odio reiciendis corporis excepturi ad quos beatae sit dicta reprehenderit atque veniam non quam at, cupiditate, maiores vero magnam?
Spacer Items
Vertical also has Spacer items to create spaces between the current item and the previous ones. As with the previous section on expanding items, this will only work if your Vertical layout contains sufficient height.
Note
Spacer is simply sets the top margin to auto. (To be more precise, we set
margin-block-start).
<div class="GridAutoFr"> <div class="Vertical"> <div>Top</div> <div class="Spacer">Bottom</div> </div> <div>...</div></div><div class="GridAutoFr"> <div class="Vertical"> <div>Top</div> <div class="mt-auto">Bottom</div> </div> <div>...</div></div>Top
Bottom
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure facere libero odio reiciendis corporis excepturi ad quos beatae sit dicta reprehenderit atque veniam non quam at, cupiditate, maiores vero magnam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure facere libero odio reiciendis corporis excepturi ad quos beatae sit dicta reprehenderit atque veniam non quam at, cupiditate, maiores vero magnam?
Vertical -> Horizontal
One of the most common responsive tactics is to switch from a Vertical layout to a Horizontal layout when there is enough space.
You can use Tailwind Responsive modifiers to do this.
<div class="Vertical md:Vertical"> <div>One</div> <div>Two</div> <div>Three</div></div> Resize to see this work!
One
Two
Three
Please login to view this content
Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.
We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.
Basic Usage
Vertical lets you lay things out vertically. It’s basically just display: flex + flex-flow: column with a couple of enhancements.
<div class="Vertical"> <div>One</div> <div>Two</div> <div>Three</div></div>One
Two
Three
Changing Gap
You can change the gap between items with the gap property or the --gap variable.
<div class="Vertical gap-8"> <div>One</div> <div>Two</div> <div>Three</div></div><div class="Vertical" style="--gap:2rem"> <div>One</div> <div>Two</div> <div>Three</div></div>One
Two
Three
Horizontal Alignment
Vertical uses align-items to align items horizontally.
<div class="Vertical items-stretch">...</div><div class="Vertical items-start">...</div><div class="Vertical items-center">...</div><div class="Vertical items-end">...</div><div class="Vertical" style="align-items: stretch">...</div><div class="Vertical" style="align-items: start">...</div><div class="Vertical" style="align-items: center">...</div><div class="Vertical" style="align-items: end">...</div>Stretch
One
Two
Three
Start
One
Two
Three
Center
One
Two
Three
End
One
Two
Three
Aligning children items
Like SingleCol, you can use align-self to align each child item individually.
<div class="Vertical"> <div>Default</div> <div class="self-start">Start</div> <div class="self-center">Center</div> <div class="self-end">End</div></div>Default
Start
Center
End
Expanding Items with flex-grow
You can use flex-grow to expand items when there is sufficient height to expand. This technique is used in Shell-simple to expand Content.
<div class="GridAutoFr"> <div class="Vertical"> <div class="flex-grow">Top</div> <div>Bottom</div> </div> <div>...</div></div>Top
Bottom
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure facere libero odio reiciendis corporis excepturi ad quos beatae sit dicta reprehenderit atque veniam non quam at, cupiditate, maiores vero magnam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure facere libero odio reiciendis corporis excepturi ad quos beatae sit dicta reprehenderit atque veniam non quam at, cupiditate, maiores vero magnam?
Spacer Items
Vertical also has Spacer items to create spaces between the current item and the previous ones. As with the previous section on expanding items, this will only work if your Vertical layout contains sufficient height.
Note
Spacer is simply sets the top margin to auto. (To be more precise, we set
margin-block-start).
<div class="GridAutoFr"> <div class="Vertical"> <div>Top</div> <div class="Spacer">Bottom</div> </div> <div>...</div></div><div class="GridAutoFr"> <div class="Vertical"> <div>Top</div> <div class="mt-auto">Bottom</div> </div> <div>...</div></div>Top
Bottom
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure facere libero odio reiciendis corporis excepturi ad quos beatae sit dicta reprehenderit atque veniam non quam at, cupiditate, maiores vero magnam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure facere libero odio reiciendis corporis excepturi ad quos beatae sit dicta reprehenderit atque veniam non quam at, cupiditate, maiores vero magnam?
Vertical -> Horizontal
One of the most common responsive tactics is to switch from a Vertical layout to a Horizontal layout when there is enough space.
You can use Tailwind Responsive modifiers to do this.
<div class="Vertical md:Vertical"> <div>One</div> <div>Two</div> <div>Three</div></div> Resize to see this work!
One
Two
Three
Here’s the CSS for Vertical.
.Vertical { display: flex; flex-direction: column; gap: var(--gap, 1rem);
.Spacer { margin-block-start: auto; }}Please login to view this content
Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.
We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.
Here’s the CSS for Vertical.
.Vertical { display: flex; flex-direction: column; gap: var(--gap, 1rem);
.Spacer { margin-block-start: auto; }}Vertical
Horizontal alignment
| Class | Description |
|---|---|
items-stretch | Default value. Stretch items. |
items-start | Aligns items to the left. |
items-center | Aligns items to the center. |
items-end | Aligns items to the right. |
CSS Variables
| Variable | Default | Description |
|---|---|---|
--gap | 1rem | Gap between items |
Children
Horizontal alignment
| Class | Description |
|---|---|
self-start | Aligns item to the left. |
self-center | Aligns item to the center. |
self-end | Aligns item to the right. |
self-stretch | Default value. Stretches the item. |
Vertical Alignment
| Class | Description |
|---|---|
Spacer | Creates a gap between this item and the one before |
Please login to view this content
Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.
We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.
Vertical
Horizontal alignment
| Class | Description |
|---|---|
items-stretch | Default value. Stretch items. |
items-start | Aligns items to the left. |
items-center | Aligns items to the center. |
items-end | Aligns items to the right. |
CSS Variables
| Variable | Default | Description |
|---|---|---|
--gap | 1rem | Gap between items |
Children
Horizontal alignment
| Class | Description |
|---|---|
self-start | Aligns item to the left. |
self-center | Aligns item to the center. |
self-end | Aligns item to the right. |
self-stretch | Default value. Stretches the item. |
Vertical Alignment
| Class | Description |
|---|---|
Spacer | Creates a gap between this item and the one before |