Description
The Layout component consists of customizable blocks arranged in various layout configurations.
These blocks can be easily customized and consumed by containers such as Card, Tile, Sidebar, and more, providing flexible design options for different screen structures.
Take a look at the Layout in practice pattern to see some examples of how the Layout component can been applied.
Flexbox
Layout employs the flexible box model (or Flexbox) to provide a simple way of managing width, spacing and alignment of blocks within a flexible container.
As a flexible container resizes, its contents are scaled and ordered according to properties applied to both the container and the individual blocks within.
Anatomy
Anatomy
Flex container
Blocks within a flex container are spaced, ordered and aligned in response to a number of CSS properties.
Flex direction
Flex wrap
Row and column gap
Justify content
Align items
Align content
Blocks
Flex grow
Flex grow examples
Flex shrink
Flex basis (flexible width)
Flex basis (fixed width)
Flex basis (fit content width)
Flex shorthand
Spacing variations
- For data-heavy contexts that require the user to focus, consider using smaller spacing variations.
- For contexts that require the user to scan for information, consider using larger spacing variations.
None
Small
Medium
Large
Technical example
Box component implemented in Carbon.
Re****sources
CSS Tricks Flexbox layout guideJosh W. Comeau's interactive guide to Flexbox