Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
ContainerDirectionJustify contentAlign itemsAlign selfAuto marginsFillGrowShrinkWrapOrderAlign contentResponsive examples

Flex

Container

Flexbox container
Inline flexbox container
<div>Flexbox container</div>
<div>Inline flexbox container</div>
<div>Flexbox container</div> <div>Inline flexbox container</div>

Direction

Row

Flex direction row
Flex direction row
Flex direction row

Row-reverse

Flex direction row-reverse
Flex direction row-reverse
Flex direction row-reverse

Column

Flex direction column
Flex direction column
Flex direction column

Column-reverse

Flex direction column-reverse
Flex direction column-reverse
Flex direction column-reverse
<h4 class="h5 text-muted mt-3">Row</h4>
<div>
  <div>Flex direction row</div>
  <div>Flex direction row</div>
  <div>Flex direction row</div>
</div>
<h4 class="h5 text-muted mt-3">Row-reverse</h4>
<div>
  <div>Flex direction row-reverse</div>
  <div>Flex direction row-reverse</div>
  <div>Flex direction row-reverse</div>
</div>
<h4 class="h5 text-muted mt-3">Column</h4>
<div>
  <div>Flex direction column</div>
  <div>Flex direction column</div>
  <div>Flex direction column</div>
</div>
<h4 class="h5 text-muted mt-3">Column-reverse</h4>
<div>
  <div>Flex direction column-reverse</div>
  <div>Flex direction column-reverse</div>
  <div>Flex direction column-reverse</div>
</div>
<h4 class="h5 text-muted mt-3">Row</h4> <div> <div>Flex direction row</div> <div>Flex direction row</div> <div>Flex direction row</div> </div> <h4 class="h5 text-muted mt-3">Row-reverse</h4> <div> <div>Flex direction row-reverse</div> <div>Flex direction row-reverse</div> <div>Flex direction row-reverse</div> </div> <h4 class="h5 text-muted mt-3">Column</h4> <div> <div>Flex direction column</div> <div>Flex direction column</div> <div>Flex direction column</div> </div> <h4 class="h5 text-muted mt-3">Column-reverse</h4> <div> <div>Flex direction column-reverse</div> <div>Flex direction column-reverse</div> <div>Flex direction column-reverse</div> </div>

Justify content

Start

Justify content start
Justify content start
Justify content start

Center

Justify content center
Justify content center
Justify content center

End

Justify content end
Justify content end
Justify content end

Between

Justify content between
Justify content between
Justify content between

Around

Justify content around
Justify content around
Justify content around
<h4 class="h5 text-muted mt-3">Start</h4>
<div>
  <div>Justify content start</div>
  <div>Justify content start</div>
  <div>Justify content start</div>
</div>
<h4 class="h5 text-muted mt-3">Center</h4>
<div>
  <div>Justify content center</div>
  <div>Justify content center</div>
  <div>Justify content center</div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<div>
  <div>Justify content end</div>
  <div>Justify content end</div>
  <div>Justify content end</div>
</div>
<h4 class="h5 text-muted mt-3">Between</h4>
<div>
  <div>Justify content between</div>
  <div>Justify content between</div>
  <div>Justify content between</div>
</div>
<h4 class="h5 text-muted mt-3">Around</h4>
<div>
  <div>Justify content around</div>
  <div>Justify content around</div>
  <div>Justify content around</div>
</div>
<h4 class="h5 text-muted mt-3">Start</h4> <div> <div>Justify content start</div> <div>Justify content start</div> <div>Justify content start</div> </div> <h4 class="h5 text-muted mt-3">Center</h4> <div> <div>Justify content center</div> <div>Justify content center</div> <div>Justify content center</div> </div> <h4 class="h5 text-muted mt-3">End</h4> <div> <div>Justify content end</div> <div>Justify content end</div> <div>Justify content end</div> </div> <h4 class="h5 text-muted mt-3">Between</h4> <div> <div>Justify content between</div> <div>Justify content between</div> <div>Justify content between</div> </div> <h4 class="h5 text-muted mt-3">Around</h4> <div> <div>Justify content around</div> <div>Justify content around</div> <div>Justify content around</div> </div>

Align items

Start

Align items start
Align items start
Align items start

Center

Align items center
Align items center
Align items center

End

Align items end
Align items end
Align items end

Baseline

Align items baseline
Align items baseline
Align items baseline

Stretch

Align items stretch
Align items stretch
Align items stretch
<h4 class="h5 text-muted mt-3">Start</h4>
<div>
  <div>Align items start</div>
  <div>Align items start</div>
  <div>Align items start</div>
</div>
<h4 class="h5 text-muted mt-3">Center</h4>
<div>
  <div>Align items center</div>
  <div>Align items center</div>
  <div>Align items center</div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<div>
  <div>Align items end</div>
  <div>Align items end</div>
  <div>Align items end</div>
</div>
<h4 class="h5 text-muted mt-3">Baseline</h4>
<div>
  <div>Align items baseline</div>
  <div>Align items baseline</div>
  <div>Align items baseline</div>
</div>
<h4 class="h5 text-muted mt-3">Stretch</h4>
<div>
  <div>Align items stretch</div>
  <div>Align items stretch</div>
  <div>Align items stretch</div>
</div>
<h4 class="h5 text-muted mt-3">Start</h4> <div> <div>Align items start</div> <div>Align items start</div> <div>Align items start</div> </div> <h4 class="h5 text-muted mt-3">Center</h4> <div> <div>Align items center</div> <div>Align items center</div> <div>Align items center</div> </div> <h4 class="h5 text-muted mt-3">End</h4> <div> <div>Align items end</div> <div>Align items end</div> <div>Align items end</div> </div> <h4 class="h5 text-muted mt-3">Baseline</h4> <div> <div>Align items baseline</div> <div>Align items baseline</div> <div>Align items baseline</div> </div> <h4 class="h5 text-muted mt-3">Stretch</h4> <div> <div>Align items stretch</div> <div>Align items stretch</div> <div>Align items stretch</div> </div>

Align self

Start

Align self start
Flex item
Flex item

Center

Align self center
Flex item
Flex item

End

Align self end
Flex item
Flex item

Baseline

Align self baseline
Flex item
Flex item

Stretch

Align self stretch
Flex item
Flex item
<h4 class="h5 text-muted mt-3">Start</h4>
<div data-example="alignSelf">
  <div>Align self start</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Center</h4>
<div data-example="alignSelf">
  <div>Align self center</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<div data-example="alignSelf">
  <div>Align self end</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Baseline</h4>
<div data-example="alignSelf">
  <div>Align self baseline</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Stretch</h4>
<div data-example="alignSelf">
  <div>Align self stretch</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Start</h4> <div data-example="alignSelf"> <div>Align self start</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">Center</h4> <div data-example="alignSelf"> <div>Align self center</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">End</h4> <div data-example="alignSelf"> <div>Align self end</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">Baseline</h4> <div data-example="alignSelf"> <div>Align self baseline</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">Stretch</h4> <div data-example="alignSelf"> <div>Align self stretch</div> <div>Flex item</div> <div>Flex item</div> </div>

Auto margins

Horizontal

Flex item
Flex item
Margin left auto
Margin right auto
Flex item
Flex item

Vertical

Margin bottom auto
Flex item
Flex item
Flex item
Flex item
Margin top auto
<h4 class="h5 text-muted mt-3">Horizontal</h4>
<div>
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Margin left auto</div>
</div>
<div>
  <div>Margin right auto</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<div>
  <div>Margin bottom auto</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<div>
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Margin top auto</div>
</div>
<h4 class="h5 text-muted mt-3">Horizontal</h4> <div> <div>Flex item</div> <div>Flex item</div> <div>Margin left auto</div> </div> <div> <div>Margin right auto</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">Vertical</h4> <div> <div>Margin bottom auto</div> <div>Flex item</div> <div>Flex item</div> </div> <div> <div>Flex item</div> <div>Flex item</div> <div>Margin top auto</div> </div>

Fill

Flex fill
Flex fill
Flex fill
<div>
  <div>Flex fill</div>
  <div>Flex fill</div>
  <div>Flex fill</div>
</div>
<div> <div>Flex fill</div> <div>Flex fill</div> <div>Flex fill</div> </div>

Grow

Flex grow
Flex grow
Flex grow
<div>
  <div>Flex grow</div>
  <div>Flex grow</div>
  <div>Flex grow</div>
</div>
<div> <div>Flex grow</div> <div>Flex grow</div> <div>Flex grow</div> </div>

Shrink

Flex shrink
Flex shrink
Flex shrink
<div>
  <div>Flex shrink</div>
  <div>Flex shrink</div>
  <div>Flex shrink</div>
</div>
<div> <div>Flex shrink</div> <div>Flex shrink</div> <div>Flex shrink</div> </div>

Wrap

Nowrap

Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap

Wrap

Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap

Wrap-reverse

Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
<h4 class="h5 text-muted mt-3">Nowrap</h4>
<div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
</div>
<h4 class="h5 text-muted mt-3">Wrap</h4>
<div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
</div>
<h4 class="h5 text-muted mt-3">Wrap-reverse</h4>
<div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
</div>
<h4 class="h5 text-muted mt-3">Nowrap</h4> <div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> </div> <h4 class="h5 text-muted mt-3">Wrap</h4> <div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> </div> <h4 class="h5 text-muted mt-3">Wrap-reverse</h4> <div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> </div>

Order

order-first (-1), order-0 to order-5 and order-last (6)

First, but last
Second, but number 5
Third, but number 4
Fourth, but number 3
Fifth, but first
Last, but unordered, so number 2
<div>
  <div>First, but last</div>
  <div>Second, but number 5</div>
  <div>Third, but number 4</div>
  <div>Fourth, but number 3</div>
  <div>Fifth, but first</div>
  <div>Last, but unordered, so number 2</div>
</div>
<div> <div>First, but last</div> <div>Second, but number 5</div> <div>Third, but number 4</div> <div>Fourth, but number 3</div> <div>Fifth, but first</div> <div>Last, but unordered, so number 2</div> </div>

Align content

Start

Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start

Center

Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center

End

Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end

Between

Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between

Around

Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around

Stretch

Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
<h4 class="h5 text-muted mt-3">Start</h4>
<div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
</div>
<h4 class="h5 text-muted mt-3">Center</h4>
<div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
</div>
<h4 class="h5 text-muted mt-3">Between</h4>
<div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
</div>
<h4 class="h5 text-muted mt-3">Around</h4>
<div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
</div>
<h4 class="h5 text-muted mt-3">Stretch</h4>
<div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
</div>
<h4 class="h5 text-muted mt-3">Start</h4> <div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> </div> <h4 class="h5 text-muted mt-3">Center</h4> <div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> </div> <h4 class="h5 text-muted mt-3">End</h4> <div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> </div> <h4 class="h5 text-muted mt-3">Between</h4> <div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> </div> <h4 class="h5 text-muted mt-3">Around</h4> <div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> </div> <h4 class="h5 text-muted mt-3">Stretch</h4> <div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> </div>

Responsive examples

Responsive utility classes exist for all the flexbox utilities: display, flex-direction, justify-content, align-items, align-self, flex-wrap, order and align-content. The examples are hidden on the screen, but can be viewed in the source code or by clicking "Toggle code" below.

Display flex for small devices and up
Display inline-flex for medium devices and up
Display flex for all devices and set flex direction to row for large devices and up
Display flex for all devices and set flex direction to row-reverse for extra large devices and up
Display flex for all devices and set flex direction to column for extra extra large devices and up
Display flex for all devices and set flex direction to column-reverse for small devices and up
Display flex for all devices and justify content to the start for medium devices and up
Display flex for all devices and justify content to the center for large devices and up
Display flex for all devices and justify content to the end for extra large devices and up
Display flex for all devices and justify content between for extra extra large devices and up
Display flex for all devices and justify content around for small devices and up
Display flex for all devices and align items to the start for medium devices and up
Display flex for all devices and align items to the center for large devices and up
Display flex for all devices and align items to the end for extra large devices and up
Display flex for all devices and align items to the baseline for extra extra large devices and up
Display flex for all devices and align items to stretch for small devices and up
Align self to the start for medium devices and up
Align self to the center for large devices and up
Align self to the end for extra large devices and up
Align self to the baseline for extra extra large devices and up
Align self to stretch for small devices and up
Fill item for medium devices and up
Grow item for large devices and up
Shrink item for extra large devices and up
Display flex for all devices and make items not wrap for extra extra large devices and up
Display flex for all devices and make items wrap for small devices and up
Display flex for all devices and make items wrap in reverse for medium devices and up
Set the order to 3 for large devices and up
Set the order to 2 for extra large devices and up
Set the order to 1 for extra extra large devices and up
Display flex for all devices and align content to the start for small devices and up
Display flex for all devices and align content to the center for medium devices and up
Display flex for all devices and align content to the end for large devices and up
Display flex for all devices and align content around for extra large devices and up
Display flex for all devices and align content to stretch for extra extra large devices and up
<div class="responsive-examples">
  <div>Display flex for small devices and up</div>
  <div>Display inline-flex for medium devices and up</div>
  <div>Display flex for all devices and set flex direction to row for large devices and up</div>
  <div>Display flex for all devices and set flex direction to row-reverse for extra large devices and up</div>
  <div>Display flex for all devices and set flex direction to column for extra extra large devices and up</div>
  <div>Display flex for all devices and set flex direction to column-reverse for small devices and up</div>
  <div>Display flex for all devices and justify content to the start for medium devices and up</div>
  <div>Display flex for all devices and justify content to the center for large devices and up</div>
  <div>Display flex for all devices and justify content to the end for extra large devices and up</div>
  <div>Display flex for all devices and justify content between for extra extra large devices and up</div>
  <div>Display flex for all devices and justify content around for small devices and up</div>
  <div>Display flex for all devices and align items to the start for medium devices and up</div>
  <div>Display flex for all devices and align items to the center for large devices and up</div>
  <div>Display flex for all devices and align items to the end for extra large devices and up</div>
  <div>Display flex for all devices and align items to the baseline for extra extra large devices and up</div>
  <div>Display flex for all devices and align items to stretch for small devices and up</div>
  <div>
    <div>Align self to the start for medium devices and up</div>
  </div>
  <div>
    <div>Align self to the center for large devices and up</div>
  </div>
  <div>
    <div>Align self to the end for extra large devices and up</div>
  </div>
  <div>
    <div>Align self to the baseline for extra extra large devices and up</div>
  </div>
  <div>
    <div>Align self to stretch for small devices and up</div>
  </div>
  <div>
    <div>Fill item for medium devices and up</div>
  </div>
  <div>
    <div>Grow item for large devices and up</div>
  </div>
  <div>
    <div>Shrink item for extra large devices and up</div>
  </div>
  <div>Display flex for all devices and make items not wrap for extra extra large devices and up</div>
  <div>Display flex for all devices and make items wrap for small devices and up</div>
  <div>Display flex for all devices and make items wrap in reverse for medium devices and up</div>
  <div>
    <div>Set the order to 3 for large devices and up</div>
    <div>Set the order to 2 for extra large devices and up</div>
    <div>Set the order to 1 for extra extra large devices and up</div>
  </div>
  <div>Display flex for all devices and align content to the start for small devices and up</div>
  <div>Display flex for all devices and align content to the center for medium devices and up</div>
  <div>Display flex for all devices and align content to the end for large devices and up</div>
  <div>Display flex for all devices and align content around for extra large devices and up</div>
  <div>Display flex for all devices and align content to stretch for extra extra large devices and up</div>
</div>
<div class="responsive-examples"> <div>Display flex for small devices and up</div> <div>Display inline-flex for medium devices and up</div> <div>Display flex for all devices and set flex direction to row for large devices and up</div> <div>Display flex for all devices and set flex direction to row-reverse for extra large devices and up</div> <div>Display flex for all devices and set flex direction to column for extra extra large devices and up</div> <div>Display flex for all devices and set flex direction to column-reverse for small devices and up</div> <div>Display flex for all devices and justify content to the start for medium devices and up</div> <div>Display flex for all devices and justify content to the center for large devices and up</div> <div>Display flex for all devices and justify content to the end for extra large devices and up</div> <div>Display flex for all devices and justify content between for extra extra large devices and up</div> <div>Display flex for all devices and justify content around for small devices and up</div> <div>Display flex for all devices and align items to the start for medium devices and up</div> <div>Display flex for all devices and align items to the center for large devices and up</div> <div>Display flex for all devices and align items to the end for extra large devices and up</div> <div>Display flex for all devices and align items to the baseline for extra extra large devices and up</div> <div>Display flex for all devices and align items to stretch for small devices and up</div> <div> <div>Align self to the start for medium devices and up</div> </div> <div> <div>Align self to the center for large devices and up</div> </div> <div> <div>Align self to the end for extra large devices and up</div> </div> <div> <div>Align self to the baseline for extra extra large devices and up</div> </div> <div> <div>Align self to stretch for small devices and up</div> </div> <div> <div>Fill item for medium devices and up</div> </div> <div> <div>Grow item for large devices and up</div> </div> <div> <div>Shrink item for extra large devices and up</div> </div> <div>Display flex for all devices and make items not wrap for extra extra large devices and up</div> <div>Display flex for all devices and make items wrap for small devices and up</div> <div>Display flex for all devices and make items wrap in reverse for medium devices and up</div> <div> <div>Set the order to 3 for large devices and up</div> <div>Set the order to 2 for extra large devices and up</div> <div>Set the order to 1 for extra extra large devices and up</div> </div> <div>Display flex for all devices and align content to the start for small devices and up</div> <div>Display flex for all devices and align content to the center for medium devices and up</div> <div>Display flex for all devices and align content to the end for large devices and up</div> <div>Display flex for all devices and align content around for extra large devices and up</div> <div>Display flex for all devices and align content to stretch for extra extra large devices and up</div> </div>