5 Flexbox Flexbox

Flexbox allows for flexible layouts that were traditionally more difficult to create.

Our configuration of Bootstrap includes flexbox for its scaffolding, so you can use .row and .col-* with any of our atoms or just put .flex on the container if you don't want to use the bootstrap scaffolding.

5.1 Flexbox - Children Flex children

The most common case is to use .flex1 on the child of a .flex parent which will distribute the sizes of each child evenly if used across all children

Example

.flex1

<div class="flex">
    <div class="bg-snow flex1">.flex1</div>
</div>

5.2 Flexbox - Container Flex container

Just .flex is need for flex containers

5.3 Flexbox - Direction Flex direction

Examples

Default styling

First flex child

Second flex child

Third flex child

row

default direction

First flex child

Second flex child

Third flex child

row-reverse

reverse row

First flex child

Second flex child

Third flex child

column

switch to column flow

First flex child

Second flex child

Third flex child

column-reverse

reverse column

First flex child

Second flex child

Third flex child

<div class="flex flex-[modifier class]">
    <div class="flex1 short bg-snow">
        First flex child
    </div>
    <div class="flex1 short bg-moonstone">
        Second flex child
    </div>
    <div class="flex1 short bg-frost">
        Third flex child
    </div>
</div>

5.4 Flexbox - Horizontal Alignment Flex Horizontal Alignment

Atoms for horizontal alignment with responsive breakpoints corresponding to bootstrap's

Examples

Default styling

.justify-[modifier class]

start

left

.justify-start

center

.justify-center

end

right

.justify-end

between

space between

.justify-between

around

space around

.justify-around

<div class="flex justify-[modifier class]">
    <div class="bg-snow">.justify-[modifier class]</div>
    <div class="bg-moonstone">.justify-[modifier class]</div>
    <div class="bg-snow">.justify-[modifier class]</div>
</div>

5.5 Flexbox - Order Order

order-1
first
order-2
second
order-3
third
order-4
fourth

Includes responsive .order-*-sm .order-*-md .order-*-lg breakpoint classes

5.6 Flexbox - Shrink and Grow Shrink and grow

Examples

Default styling

.[modifier class]

without .[modifier class]

shrink-0

shrink 0

.shrink-0

without .shrink-0

grow-1

grow 1

.grow-1

without .grow-1

<div class="flex">
    <div class="bg-snow [modifier class]">.[modifier class]</div>
    <div class="bg-snow">without .[modifier class]</div>
</div>

5.7 Flexbox - Vertical Alignment Flex Vertical Alignment

Atoms for vertical alignment with responsive breakpoints corresponding to bootstrap's.

Examples

Default styling

.align-[modifier class]

group-start

top, using flex-start

.align-group-start

group-center

center

.align-group-center

group-end

bottom, using flex-end

.align-group-end

group-stretch

stretch

.align-group-stretch

start

align self to top

.align-start

center

align self to center

.align-center

end

align self to bottom

.align-end

stretch

align self to stretch

.align-stretch

<div style="height: 100px;" class="flex align-[modifier class]">
    .align-[modifier class]
</div>

5.8 Flexbox - Wrap Flex wrap

Flex wrap is used to split onto multiple rows when there is an overflow, the default action of flex is to shrink elements until they fit in the row. However, in some cases we want to overflow onto the next line. The class flex-wrap will then allow us to do that.

Examples

Default styling

First Child

Second Child

Third Child

flex-wrap-none

default used as default by flex

First Child

Second Child

Third Child

flex-wrap

split to multiple rows, ltr

First Child

Second Child

Third Child

flex-wrap-reverse

split to multiple rows, rtl

First Child

Second Child

Third Child

<div class="flex [modifier class]">
    <div class="p-a-m border full-width">First Child</div>
    <div class="p-a-m border full-width">Second Child</div>
    <div class="p-a-m border full-width">Third Child</div>
</div>