Skip to content
Home

FlexContainer

Info
Demos
Properties

Description

Layout.FlexContainer is a building block for CSS flexbox based layout of contents and components.

Ideally, use Layout.FlexItem or Layout.Card for you inner wrappers.

Horizontal and Vertical aliases

For shortening the usage of direction="...", you can use:

  • <Layout.Vertical> instead of <Layout.FlexContainer direction="vertical">
<Layout.Vertical>
  <Layout.FlexItem>part of vertical alignment</Layout.FlexItem>
  <Layout.FlexItem>part of vertical alignment</Layout.FlexItem>
</Layout.Vertical>
  • <Layout.Horizontal> instead of <Layout.FlexContainer direction="horizontal">
<Layout.Horizontal>
  <Layout.FlexItem>part of horizontal alignment</Layout.FlexItem>
  <Layout.FlexItem>part of horizontal alignment</Layout.FlexItem>
</Layout.Horizontal>