Flex

Flex is a Box with display: flex. Use Box for flexbox items. Visit CSS Tricks' guide to Flexbox to learn more on how to use flexbox.

Basic Example

Using flexbox to vertically center text.

Hi, I'm centered vertically with flexbox align-items!

More complex example

Here, we make mulitple equally sized columns (or flexbox items) with an image on the most right column. We use Box as flexbox items since their display property isnt default flex.

1
2
3
4
5
bridge hero

Common Props

Flex includes COMMON, FLEX, and BORDER props. Read Common Props for details and API. These common props will override component props such as the color.

Component Props

Prop nameTypeDefaultDescription
themeObjectBridge Themeuse to override default bridge theme