1_5_flex

Enable Flex Behaviors

d-flex or d-inline-flex

(with breakpoints)

d-{breakpoint}-flex or d-{breakpoint}-inline-flex

d-{sm, md, lg, xl}-flex or d-{sm, md, lg, xl}-inline-flex

I'm a flexbox container!

I'm an inline flexbox container!

I'm d-flex and d-inline-flex at different breakpoints

Flex Horizontal Direction

.flex-row or flex-row-reverse

(with breakpoints)

.flex-{breakpoint}-row or .flex-{breakpoint}-row-reverse

.flex-{sm, md, lg, xl}-row or .flex-{sm, md, lg, xl}-row-reverse

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex Vertical Direction

.flex-column or .flex-column-reverse

(with breakpoints)

.flex-{breakpoint}-column or .flex-{breakpoint}-column-reverse

.flex-{sm, md, lg, xl}-column or .flex-{sm, md, lg, xl}-column-reverse

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Justify Content

.justify-content-* = .justify-content-{start, end, center, between, around}

(with breakpoints)

.justify-content-{breakpoint}-* = .justify-content-{sm, md, lg, xl}-{start, end, center, between, around}

Flex Item

Auto Margins

(with justify-content)

.mr-auto or .ml-auto

Flex item

Align Items

.align-items-* = .align-items-{start, end, center, baseline, stretch}

(with breakpoints)

.align-items-{breakpoint}-* = .align-items-{sm, md, lg, xl}-{start, end, center, baseline, stretch}

Align Items Start

Flex Item

Align Items End

Flex Item

Align Items Center

Flex Item

Align Items Baseline

Flex Item

Align Items Stetch

Flex Item

Auto Margins

(with align-items)

.mb-auto or .mt-auto & .flex-column

Flex item

Align Self

.align-self-* = .align-self-{start, end, center, baseline, stretch}

(with breakpoints)

.align-self-{breakpoint}-* = .align-self-{sm, md, lg, xl}-{start, end, center, baseline, stretch}

Align Self Start

Aligned flex item

Align Self End

Aligned flex item

Align Self Center

Aligned flex item

Align Self Baseline

Aligned flex item

Align Self Stretch

Aligned flex item

Flex Wrap

.flex-nowrap or .flex-wrap or .flex-wrap-reverse

(with breakpoints)

.flex-{breakpoint}-nowrap or .flex-{breakpoint}-wrap or .flex-{breakpoint}-wrap-reverse

.flex-{sm, md, lg, xl}-nowrap or .flex-{sm, md, lg, xl}-wrap or .flex-{sm, md, lg, xl}-wrap-reverse

Flex Item

Align Content

.align-content-* = .align-content-{start, end, center, between, around, stretch}

(with breakpoints)

.align-content-{breakpoint}-* = .align-content-{sm, md, lg, xl}-{start, end, center, between, around, stretch}

Align Content Start

Flex Item

Align Content End

Flex Item

Align Content Center

Flex Item

Align Content Between

Flex Item

Align Content Around

Flex Item

Align Content Stretch

Flex Item

Order

.order-# = .order-{0-12}

(with breakpoints)

.order-{breakpoint}-# = .order-{sm, md, lg, xl}-{0-12}

First flex item

Second flex item

Third flex item

originally # 1

originally # 2

originally # 3

originally # 4

originally # 5

originally # 6

Flex

XS

Portrait Phones

<576px

SM

Landscape Phones

≥576px to <768px

MD

Tablets

≥768px to <992px

LG

Laptops

≥992px to <1200px

XL

Desktops

≥1200px

Enable Flex Behaviors

Flex Horizontal Direction

Flex Vertical Direction

Justify Content

Auto Margins

(with justify-content)

Align Items

Align Items Start

Align Items End

Align Items Center

Align Items Baseline

Align Items Stetch

Auto Margins

(with align-items)

Align Self

Align Self Start

Align Self End

Align Self Center

Align Self Baseline

Align Self Stretch

Flex Wrap

Align Content

Align Content Start

Align Content End

Align Content Center

Align Content Between

Align Content Around

Align Content Stretch

Order