Skip to content
Sageis Flow
Theme mode
Notifications
Leo Duarte sent a new order
36 min agoKai Haddad joined the team
yesterdayFreya Mensah commented on your task
yesterday
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 team has done this many times, so you never have to guess.

7Auto margins

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

Sageis Flow 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.

  • Recorded sessions
    Thousands of attendees already trust us, and we work hard to keep it that way.
  • World-class speakers
    We keep things simple, so you can focus on what matters to you.

13Sticky footer in a card

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

A beginner's guide to getting started

Friendly people answer your questions quickly, by phone, chat or email.

Open
Joining online: how the virtual pass works

We listen first, then build a plan around what you actually need. Workshops are limited to thirty seats, so everyone gets hands-on time. Group tickets include a private meeting room for your team.

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.

$41.31/ monthbilled yearly

16Horizontal stack

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

how-to Our favourite tips for busy weeks

17Vertical stack

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

Be in the room where it happens
Start in minutes and get help from a real person whenever you need it.

18Responsive justify

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

Showing 1-10 of 167

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.

Talks, workshops and new friendships

Join the conference of the year

Three days of keynotes, hands-on workshops and evening meetups. More than eighty speakers share what they have learned the hard way.