Skip to content
  • Theme mode
Notifications
Finn Tanaka commented on your task
yesterdayRavi Whitaker joined the team
50 min agoMia Rossi sent a new order
just now
View all

Flex

Flex utilities control flexbox layouts: direction, wrapping, alignment on both axes, growing, shrinking, order and gaps. Every utility has responsive variants such as flex-md-row or justify-content-lg-between, so one set of markup can stack on phones and spread out on larger screens.

1Direction

flex-row is the default, flex-row-reverse flips it, flex-column stacks items.

1
2
3
1
2
3
1
2
3

2Justify content

start, center, end, between, around and evenly distribute free space on the main axis.

A
B
A
B
A
B
A
B
A
B
A
B

3Align items

align-items-start, -center, -end and -stretch align items on the cross axis.

start
x
start
x
start
x
start
x

4Align self

align-self-* moves a single item on the cross axis.

start
center
end
stretch

5Fill and grow

flex-fill shares space equally, flex-grow-1 takes the remaining space.

flex-fill
flex-fill wider text
fill
auto
flex-grow-1
auto

6Shrink

flex-shrink-0 keeps an item at its size while the other one shrinks.

flex-shrink-0
flex-shrink-1 - Our secure checkout turns every detail in view from the very first day.

7Auto margins

ms-auto pushes an item and everything after it to the end.

Brand name 9 Docs Blog

8Wrap

flex-wrap lets items move to a new line; flex-nowrap keeps one line.

item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item

9Order

order-* changes the visual order without changing the markup.

first in markup, order-3
second, order-1
third, order-2

10Row gap and column gap

row-gap-* and column-gap-* set the two gaps separately.

row-gap-4
column-gap-1
c
d
e
f
g
h
i
j
k
l

11Responsive direction

flex-column flex-sm-row: a sign-up form stacks on phones and sits in one row from sm.

12Media list

Each row is d-flex with an icon box that never shrinks.

  • Sustainable materials
    Our loyalty rewards helps data easy to understand for teams of every size.
  • Member prices
    The new easy exchanges helps decisions quicker and clearer from the very first day.

13Sticky footer in a card

A flex-column card with flex-grow-1 body keeps the button at the bottom regardless of text length.

How we rebuilt our team

Our loyalty rewards shows complex tasks into simple steps in just a few clicks.

Open
What's new in home

A clear routine guides you focused on what matters in just a few clicks. The new member prices lets customers coming back at a fair price. A flexible team gives data easy to understand from the very first day.

Open

14Align content

align-content-* distributes wrapped lines in a taller container.

align-content-between
b
c
d
e
f
g
h
i
j

15Baseline alignment

align-items-baseline lines up text of different sizes on its baseline.

$40.15/ monthbilled yearly

16Horizontal stack

hstack is a shortcut for a centred flex row with gap.

release A guide to 30-day returns

17Vertical stack

vstack is a flex column with gap: quick form or card layouts.

Everyday essentials, beautifully made
The new member prices connects you focused on what matters without the usual hassle.

18Responsive justify

justify-content-center justify-content-md-between centres on phones and spreads from md.

Showing 1-10 of 108

19Equal width columns with flex-fill

Navigation tabs share the row equally with flex-fill and text-center.

20Reverse on large screens

flex-column flex-lg-row-reverse: on large screens the image moves to the right.

Shop the collection everyone talks about

Everyday essentials, beautifully made

This modern process turns the whole team on the same page in just a few clicks. The new sustainable materials gives your work organised without the usual hassle.