Skip to content
Home

FlexItem

Info
Demos
Properties

Description

Layout.FlexItem is a building block for CSS flexbox based layout of contents and components. Should be used in combination with FlexContainer.

Responsive size adjustment

You can provide a size prop with a number from 1 to 12 (can be changed in FlexContainer with the columns property).

A number represents a size in percent. The number 6 results in 50%, while 12 results in 100%.

Code Editor
<Layout.FlexContainer direction="horizontal">
  <Layout.FlexItem size={6}>uses 50% in width</Layout.FlexItem>
  <Layout.FlexItem size={6}>uses 50% in width</Layout.FlexItem>
</Layout.FlexContainer>

You can also make sizes respond to a media query.

You can provide a size prop with an object containing Media Query types. Each size can contain a column number. The default amount of columns is 12. You can change it by giving FlexContainer a prop called columns={8}.

Code Editor
<Layout.FlexContainer direction="horizontal">
  <Layout.FlexItem
    size={{
      small: 12,
      large: 6,
    }}
  >
    uses 50% or 100% based on the screen size
  </Layout.FlexItem>
  <Layout.FlexItem
    size={{
      small: 12,
      large: 6,
    }}
  >
    uses 50% or 100% based on the screen size
  </Layout.FlexItem>
</Layout.FlexContainer>

You need to ensure that flex-wrap: wrap is set to make the items wrap to a new line. This is enabled by default in the FlexContainer.

Demo

Contents
Code Editor
<Layout.FlexItem>Contents</Layout.FlexItem>

Widths

No width (default)

Contents

Small

Cont.

Medium

Contents

Large

Contents
Code Editor
<Layout.Card>
  <P>No width (default)</P>
  <Layout.FlexItem>
    <TestElement>Contents</TestElement>
  </Layout.FlexItem>
  <P>Small</P>
  <Layout.FlexItem width="small">
    <TestElement>Cont.</TestElement>
  </Layout.FlexItem>
  <P>Medium</P>
  <Layout.FlexItem width="medium">
    <TestElement>Contents</TestElement>
  </Layout.FlexItem>
  <P>Large</P>
  <Layout.FlexItem width="large">
    <TestElement>Contents</TestElement>
  </Layout.FlexItem>
</Layout.Card>