We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.
Flex helpers, based on flexbox, help layout responsive elements within a container.
Denali’s flex helpers are based on flexbox. For more information about flexbox Read this guide before getting started.
Helper classes for controlling how flex items both grow and shrink.
Class | Properties |
---|---|
.flex |
display: flex; |
.flex-auto |
flex: auto; |
.flex-1 |
flex: 1; |
.flex-... |
flex: … |
.flex-4 |
flex: 4; |
Use .flex
to set flexbox properties for all items in the container.
<div class="flex">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .flex-auto
to set flex items to shrink or grow.
<div class="flex">
<div class="box w-50">Width 50px</div>
<div class="box flex-auto">Flex Auto</div>
<div class="box w-50">Width 50px</div>
</div>
Use .flex-1
to .flex-4
to set flex items width depending on other flex items in the same container.
<div class="flex">
<div class="box flex-1">Flex 1</div>
<div class="box flex-4">Flex 4</div>
</div>
Helpers classes for controlling the direction of flex items.
Class | Properties |
---|---|
.flex-column |
flex-direction: column; |
.flex-column-reverse |
flex-direction: column-reverse; |
.flex-row |
flex-direction: row; |
.flex-row-reverse |
flex-direction: row-reverse; |
Use .flex-column
to set flex container to align items vertically in the same direction.
<div class="flex flex-column">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .flex-column-reverse
to set flex container to align items vertically in the opposite direction.
<div class="flex flex-column-reverse">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .flex-column
to set flex container to align items horizontally in the same direction.
<div class="flex flex-row">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .flex-column-reverse
to set flex container to align items horizontally in the opposite direction.
<div class="flex flex-row-reverse">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Helpers classes for controlling how flex items are positioned.
Class | Properties |
---|---|
.space-between |
justify-content: space-between; |
.space-around |
justify-content: space-around; |
.justify-content-center |
justify-content: center; |
Use .space-between
to provide equal space between items in the container on the main axis.
<div class="flex space-between">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .space-around
to provide equal space around items in the container on the main axis.
<div class="flex space-around">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .justify-content-center
to center items in the container on the main axis.
<div class="flex justify-content-center">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Helpers classes for controlling how flex items are positioned within a container.
Class | Properties |
---|---|
.align-items-center |
align-items: center; |
.align-self-start |
align-self: start; |
.align-self-center |
align-self: center; |
.align-content-center |
align-content: center; |
Use .align-items-center
to center items in the container on the cross axis.
<div class="flex align-items-center">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .align-self-start
on a flex items to position that item at the start of the container on the cross axis.
<div class="flex">
<div class="box"> Box 1</div>
<div class="box align-self-start"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .align-self-center
on a flex items to center that item in the container on the cross axis.
<div class="flex">
<div class="box"> Box 1</div>
<div class="box align-self-center"> Box 2</div>
<div class="box"> Box 3</div>
</div>
Use .content-center
to center all items in the container to the middle of the cross axis:
<div class="flex content-center">
<div class="box"> Box 1</div>
<div class="box"> Box 2</div>
<div class="box"> Box 3</div>
</div>