Kickstand UI

# Flex Layouts

There are a number of utility classes available for creating flex layouts. These classes are designed to create dynamic layouts without writing any custom styles. For more advanced layouts, check out Kickstand UI's grid system.

TIP

For additional information on flexbox check out this great guide on CSS Tricks (opens new window). Also check out Flexbox Zombies (opens new window) for a fun way to learn more about using flexbox.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex p-sm bg-primary">
    <div class="p-sm bg-light border border-dark">Item 1</div>
    <div class="p-sm bg-light border border-dark">Item 2</div>
    <div class="p-sm bg-light border border-dark">Item 3</div>
</div>

<!-- column -->
<div class="display-flex flex-column p-sm bg-primary" style="height: 250px;">
    <div class="p-sm bg-light border border-dark">Item 1</div>
    <div class="p-sm bg-light border border-dark">Item 2</div>
    <div class="p-sm bg-light border border-dark">Item 3</div>
</div>

# Spacing

# Space Between

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex p-sm bg-primary">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column p-sm bg-primary" style="height: 250px;">
    ...
</div>

# Space Around

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex space-around p-sm bg-primary">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column space-around p-sm bg-primary" style="height: 250px;">
    ...
</div>

# Space Evenly

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex space-evenly p-sm bg-primary">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column space-evenly p-sm bg-primary" style="height: 250px;">
    ...
</div>

# Justification

# Justify Start

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex justify-start p-sm bg-primary">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column justify-start p-sm bg-primary" style="height: 250px;">
    ...
</div>

# Justify Center

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex justify-center p-sm bg-primary">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column justify-center p-sm bg-primary" style="height: 250px;">
    ...
</div>

# Justify End

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex justify-end p-sm bg-primary">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column justify-end p-sm bg-primary" style="height: 250px;">
    ...
</div>

# Alignment

# Align Start

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex align-start p-sm bg-primary" style="height: 100px;">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column align-start p-sm bg-primary" style="height: 150px;">
    ...
</div>

# Align Center

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex align-center p-sm bg-primary" style="height: 100px;">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column align-center p-sm bg-primary" style="height: 150px;">
    ...
</div>

# Align End

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex align-end p-sm bg-primary" style="height: 100px;">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column align-end p-sm bg-primary" style="height: 150px;">
    ...
</div>

# Align Stretch

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- row -->
<div class="display-flex align-stretch p-sm bg-primary" style="height: 100px;">
    ...
</div>

<!-- column -->
<div class="display-flex flex-column align-stretch p-sm bg-primary" style="height: 150px;">
    ...
</div>

# Responsive

All of the flexbox utility classes have responsive capabilities as well. If you prefix any of these classes with a responsive identifier (xxs-xl), you can modify the layout based on the user's screen size.

Item 1
Item 2
Item 3
<div class="display-flex space-between md:flex-column md:justify-start" style="height: 250px;">
    ...
</div>

# Available Classes

Class CSS Rule
display-flex display: flex;
flex-wrap flex-wrap: wrap;
flex-nowrap flex-wrap: nowrap;
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-column flex-direction: column;
flex-column-reverse flex-direction: column-reverse;
space-between justify-content: space-between;
space-around justify-content: space-around;
space-evenly justify-content: space-evenly;
justify-center justify-content: center;
justify-start justify-content: flex-start;
justify-end justify-content: flex-end;
align-start align-items: flex-start;
align-end align-items: flex-end;
align-center align-items: center;
align-stretch align-items: stretch;

← DOM Utilities →