Flex
Use flexbox utilities to change the values of flexbox properties responsively.
Introduction
Flexbox is a widely used layout scenario in CSS, if you’re not familiar with it, be sure to read this tutorial at first.
Flexbox utilities must be applied to flexbox containers or flexbox items,
you can use the .d-flex class or the .d-inline-flex class
to create a flexbox container.
All flexbox utilities are extended with the screen width breakpoint postfixes.
Flex Direction
Flex direction utilities are classes for setting the value of the
flex-direction
property, they are named using the format: .fd-{value}-{postfix}.
The value can be one of row, row-reverse, column
and column-reverse.
See how they change flex items’ directions in the below examples.
One
Two
<div class="d-flex fd-row bc-dark">
<p class="bc-primary px-small c-light">One</p>
<p class="bc-danger px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fd-row-reverse bc-dark">
<p class="bc-primary px-small c-light">One</p>
<p class="bc-danger px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fd-column">
<p class="bc-primary px-small c-light">One</p>
<p class="bc-danger px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fd-column-reverse">
<p class="bc-primary px-small c-light">One</p>
<p class="bc-danger px-small c-light">Two</p>
</div>
Flex Wrap
Flex wrap utilities are classes for setting the value of the
flex-wrap property,
they are named using the format: .fw-{value}-{postfix}.
The value can be one of nowrap, wrap and wrap-reverse.
Let’s see the below examples for detail.
One
Two
<div class="d-flex fw-nowrap">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fw-wrap">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fw-wrap-reverse">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
Justify Content
Justify content utilities are classes for setting the value of the
justify-content
property, they are named using the format: .jc-{value}-{postfix}.
The value can be one of start, center, end, between and around.
One
Two
<div class="d-flex jc-start bc-dark">
<p class="bc-primary w-33 px-small c-light">One</p>
<p class="bc-danger w-33 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex jc-center bc-dark">
<p class="bc-primary w-33 px-small c-light">One</p>
<p class="bc-danger w-33 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex jc-end bc-dark">
<p class="bc-primary w-33 px-small c-light">One</p>
<p class="bc-danger w-33 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex jc-between bc-dark">
<p class="bc-primary w-33 px-small c-light">One</p>
<p class="bc-danger w-33 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex jc-around bc-dark">
<p class="bc-primary w-33 px-small c-light">One</p>
<p class="bc-danger w-33 px-small c-light">Two</p>
</div>
Align Content
Align content utilities are classes for setting the value of the
align-content
property, they are named using the format: .ac-{value}-{postfix}.
The value can be one of start, center, end, between, around and stretch.
One
Two
<div class="d-flex fw-wrap ac-start bc-dark" style="height: 9rem">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fw-wrap ac-center bc-dark" style="height: 9rem">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fw-wrap ac-end bc-dark" style="height: 9rem">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fw-wrap ac-between bc-dark" style="height: 9rem">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fw-wrap ac-around bc-dark" style="height: 9rem">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex fw-wrap ac-stretch bc-dark" style="height: 9rem">
<p class="bc-primary w-100 px-small c-light">One</p>
<p class="bc-danger w-100 px-small c-light">Two</p>
</div>
Align Items
Align item utilities are classes for setting the value of the
align-items property,
they are named using the format .ai-{value}-{postfix}.
The value can be one of start, center, end, baseline and stretch.
One
Two
<div class="d-flex ai-start bc-dark" style="height: 6rem">
<p class="bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex ai-center bc-dark" style="height: 6rem">
<p class="bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex ai-baseline bc-dark" style="height: 6rem">
<p class="bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex ai-end bc-dark" style="height: 6rem">
<p class="bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex ai-stretch bc-dark" style="height: 6rem">
<p class="bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
Align Self
Align self utilities are classes for setting the value of the
align-self propery,
they are like the align items utilities, but only affect specfic flex items.
Align self utilities are named using the format: .as-{value}-{postfix}.
The value can be one of start, center, end, baseline and stretch.
One
Two
<div class="d-flex bc-dark" style="height: 6rem">
<p class="as-start bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex as-center bc-dark" style="height: 6rem">
<p class="as-center bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex as-baseline bc-dark" style="height: 6rem">
<p class="as-baseline bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex as-end bc-dark" style="height: 6rem">
<p class="as-end bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
One
Two
<div class="d-flex as-stretch bc-dark" style="height: 6rem">
<p class="as-stretch bc-primary w-50 px-small c-light">One</p>
<p class="p2 bc-danger w-50 px-small c-light">Two</p>
</div>
Flex Order
Flex order utilities are classes for setting the value of the
order property
to sort flex items. There’re two kinds of order utilities in Luda,
positive order utilities and negative order utilities.
Positive order utilities are used to move flex items backward to
unsorted items, and negative order utilities are used to
move flex items forward to unsorted items.
Positive order utilities are named using the format:
.od-{value}-{postfix}, and negative order utilities are
named using the format: .on-{value}-{postfix}.
The value can be from 1 to 6.
Let’s preview how they change flex items’ orders in the below example.
.od-6
.od-5
.od-4
.od-3
.od-2
.od-1
.on-1
.on-2
.on-3
.on-4
.on-5
.on-6
<div class="d-flex fw-wrap bc-dark">
<p class="od-6 w-100 px-small bc-primary c-light">.od-6</p>
<p class="od-5 w-100 px-small bc-danger c-light">.od-5</p>
<p class="od-4 w-100 px-small bc-primary c-light">.od-4</p>
<p class="od-3 w-100 px-small bc-danger c-light">.od-3</p>
<p class="od-2 w-100 px-small bc-primary c-light">.od-2</p>
<p class="od-1 w-100 px-small bc-danger c-light">.od-1</p>
<p class="on-1 w-100 px-small bc-primary c-light">.on-1</p>
<p class="on-2 w-100 px-small bc-danger c-light">.on-2</p>
<p class="on-3 w-100 px-small bc-primary c-light">.on-3</p>
<p class="on-4 w-100 px-small bc-danger c-light">.on-4</p>
<p class="on-5 w-100 px-small bc-primary c-light">.on-5</p>
<p class="on-6 w-100 px-small bc-danger c-light">.on-6</p>
</div>
Flex Grow and Flex Shrink
Flex grow utilities set the value of the
flex-grow property.
The .flex-growable-{postfix} classes are used to
make a flex item able to grow to fill the remaining space
in its flex container.
Oppositely, the .flex-ungrowable-{postfix} classes are
used to make a flex item not able to grow.
Flex shrink utilities set the value of the
flex-shrink property,
The .flex-shrinkable-{postfix} classes are used to
make a flex item able to shrink when
the space in its flex container is not enough.
Oppositely, the .flex-unshrinkable-{postfix} classes are
used to make a flex item not able to shrink.
The .flex-auto-{postfix} classes are used to make a flex item able to
grow and shrink.
Let’s see the below examples for detail.
.flex-growable.w-33
.flex-ungrowable.w-33
<div class="d-flex bc-dark">
<p class="flex-growable w-33 bc-primary c-light px-small">.flex-growable.w-33</p>
<p class="flex-ungrowable w-33 bc-danger c-light px-small">.flex-ungrowable.w-33</p>
</div>
.flex-shrinkable.w-66
.flex-unshrinkable.w-66
<div class="d-flex bc-dark">
<p class="flex-shrinkable w-66 bc-primary c-light px-small">.flex-shrinkable.w-66</p>
<p class="flex-unshrinkable w-66 bc-danger c-light px-small">.flex-unshrinkable.w-66</p>
</div>
.flex-auto.w-66
.flex-auto.w-66
<div class="d-flex bc-dark">
<p class="flex-auto w-66 bc-primary c-light px-small">.flex-auto.w-66</p>
<p class="flex-auto w-66 bc-danger c-light px-small">.flex-auto.w-66</p>
</div>