MapCSS

Flexbox & Grid

Flex Direction

Utilities for controlling the direction of flex items.

Basic usage

Row

Use flex-row to position flex items horizontally in the same direction as text:

01
02
03
<div className="flex **flex-row** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Row reversed

Use flex-row-reverse to position flex items horizontally in the opposite direction:

01
02
03
<div className="flex **flex-row-reverse** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Column

Use flex-col to position flex items vertically:

01
02
03
<div className="flex **flex-col** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Column reversed

Use flex-col-reverse to position flex items vertically in the opposite direction:

01
02
03
<div className="flex **flex-col-reverse** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>