Vistaprint

Flexbox

FlexBox is available in React Visage only. It is a simple, unstyled container that understands CSS flex layout without the need for adding any custom CSS.

Playground

Usage

To get familiar with the intricacies of flex layout, check out A Complete Guide to Flexbox

Our FlexBox component understands only a subset of the possible options for flex layouts, but it should cover most use-cases.

  • justifyContent - aligns items along the primary axis (x-axis by default)

  • alignItems - aligns items along the secondary axis (y-axis by default)

  • flexWrap - determines whether the items in the FlexBox should wrap to the next line or not

  • flexDirection - determines whether the items in the FlexBox are laid out in a row or column, this also switches the primary and secondary axes!

Note that the border below is only for illustrative purposes. This is just a div (or whatever element you want via the as prop).

Share
Share
jsx
jsx
<FlexBox justifyContent="center" alignItems="center">
  these contents will be center-aligned on both axes
</FlexBox>

Components

FlexBox

PropTypeDefaultDescription
flexWrap"inherit" | "initial" | "wrap" | "-moz-initial" | "revert" | "unset" | "nowrap" | "wrap-reverse"

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Syntax: nowrap | wrap | wrap-reverse

Initial value: nowrap

Chrome Firefox Safari Edge IE
29 28 9 12 11
21 -x- 6.1 -x-
@see https ://developer.mozilla.org/docs/Web/CSS/flex-wrap
flexDirection"row" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "column" | "column-reverse" | "row-reverse"

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Syntax: row | row-reverse | column | column-reverse

Initial value: row

Chrome Firefox Safari Edge IE
29 20 9 12 11
21 -x- 7 -x- 10 -x-
@see https ://developer.mozilla.org/docs/Web/CSS/flex-direction
alignItemsAlignItems

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

Syntax: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]

Initial value: normal

Supported in Flex Layout

Chrome Firefox Safari Edge IE
52 20 9 12 11
21 -x- 7 -x-

Supported in Grid Layout

Chrome Firefox Safari Edge IE
57 52 10.1 16 No

@see https ://developer.mozilla.org/docs/Web/CSS/align-items

justifyContentJustifyContent

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

Syntax: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

Initial value: normal

Supported in Flex Layout

Chrome Firefox Safari Edge IE
52 20 9 12 11
21 -x- 6.1 -x-

Supported in Grid Layout

Chrome Firefox Safari Edge IE
57 52 10.1 16 No

@see https ://developer.mozilla.org/docs/Web/CSS/justify-content

All other props are forwarded to the element specified in thecomponentprop(default: <div/>)