React

Flex

ExamplesPropsCSS Variables

Examples

Flex Basics

Basic

Flex item
Flex item
Flex item
Flex item
Flex item

Nesting

Flex item
Flex item
Flex item
Flex item
Flex item

Nested with items

Flex item
Flex item
Flex item
Flex item
Flex item

Flex Spacing

Individually spaced

Item - none
Item - xs
Item -sm
Item - md
Item - lg
Item - xl
Item - 2xl
Item - 3xl

Spacing xl

Flex item
Flex item
Flex item
Flex item
Flex item

Spacin none

Flex item
Flex item
Flex item
Flex item
Flex item

Flex layout modifiers

Default layout

Flex item
Flex item
Flex item
Flex item
Flex item

Inline

Flex item
Flex item
Flex item
Flex item
Flex item

Using canGrow

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Adjusting width

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Specifying column widths

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Column layout modifiers

Column layout

Flex item
Flex item
Flex item

Stacking elements

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Nesting elements in columns

Flex item
Flex item
Flex item
Flex item
Flex item

Responsive layout modifiers

Switching between direction column and row

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Controlling width of text

Flex item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.
Flex item
Flex item

Flex alignment

Aligning right

Flex item
Flex item
Flex item
Flex item
Flex item