FlexBox

import { FlexBox, FlexRow, FlexCol } from 'cx/widgets';

FlexBox is a convenience widget for setting up simple flex-box based layouts. FlexBox provides a number of shortcut options which make it easy to justify, align or add spacing to the content.

Spacing

Spacing Justify Align Wrap Pad

<FlexRow spacing>
    <div style="width: 30px; height: 30px; background: lightgray;" />
    <div style="width: 40px; height: 40px; background: lightgray;" />
    <div style="width: 50px; height: 50px; background: lightgray;" />
</FlexRow>

Copied!Cx Fiddle

Justify

Align

Wrap

Pad

Mixed Mode (`hpad`, `vpad`, `hspacing`, `vspacing`)

Mixed Targets

<FlexRow spacing target="desktop">
    <div style="flex: 1; height: 30px; background: lightgray;" />
    <div style="flex: 1; height: 30px; background: lightgray;" />
    <div style="flex: 1; height: 30px; background: lightgray;" />
</FlexRow>

<FlexRow spacing target="tablet">
    <div style="flex: 1; height: 30px; background: lightgray;" />
    <div style="flex: 1; height: 30px; background: lightgray;" />
</FlexRow>

Copied!Cx Fiddle

`target="desktop"`

This will break into multiple rows on screens smaller than desktop, e.g. tablets and phones.

`target="tablet"`

This will break into multiple rows on phones, but will remain in one line on desktop screens.

Notes

Please note that CSS based layouts should be preferred to FlexBox for more complex arrangements.

spacing option sets a negative margin which may cause unexpected behaviour in some scenarios.

FlexRow = FlexBox + direction="row"

FlexCol = FlexBox + direction="column"

Configuration

Property	Description	Type
align	Specifies the alignment of items. One to one mapping to CSS `align-items`. Default is `stretch`.	string
direction	Flex direction. Default is `row`. Other permitted values are `column`, `column-reverse` and `row-reverse`.	string
hpad hpadding	Add horizontal padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`. Value `true` is equivalent to `medium`.	string/boolean
hspacing	Add horizontal spacing between items by applying a margin to children. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`. Value `true` is equivalent to `medium`.	string/boolean
justify	Defines how space is distributed between and around flex items. One to one mapping with CSS `justify-content`. Default is `flex-start`.	string
nested	Set to `true` to add overflow styles required for deeply nested flexbox calculations.	boolean
pad padding	Add padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`. Value `true` is equivalent to `medium`.	string/boolean
spacing	Add spacing between items by applying a margin to children. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`. Value `true` is equivalent to `medium`.	string/boolean
target	Indicate target screen size. If screen size is too small, flexbox breaks and each item takes a full row. Supported values are `any`, `tablet` and `desktop`. Default is `any`.	string
vpad vpadding	Add vertical padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`. Value `true` is equivalent to `medium`.	string/boolean
vspacing	Add vertical spacing between items by applying a margin to children. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`. Value `true` is equivalent to `medium`.	string/boolean
wrap	Set to `true` to allow overflow content to wrap.	boolean
baseClass	Base CSS class. Default is `flexbox`.	string
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

FlexBox