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>