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.

Size adjustment

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

The number will used to calculate a percentage unit and applied to the item via CSS.

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>

Responsive size

You can also make sizes respond to media queries.

You can provide a size prop with an object containing Media Query types. Each size can contain a column number.

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, so the items wrap to a new line when needed. This is enabled by default in the FlexContainer.

Demo

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

Advanced size

FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
const breakpoints = {
  ...defaultBreakpoints,
  xsmall: '30em',
}
const queries = {
  ...defaultQueries,
  xsmall: {
    min: 0,
    max: 'xsmall',
  },
  small: {
    min: 'xsmall',
    max: 'small',
  },
}
const CustomMediaQuery = styled.div`
  .dnb-layout__flex-container[data-media-key='xsmall']
    .dnb-layout__flex-item--responsive {
    --size: var(--xsmall);
  }
`
render(
  <CustomMediaQuery>
    <Layout.FlexContainer
      direction="horizontal"
      wrap
      columns={4}
      breakpoints={breakpoints}
      queries={queries}
    >
      <Layout.FlexItem
        size={{
          small: 2,
          medium: 3,
          large: 1,
        }}
      >
        <TestElement style={colors[0]}>FlexItem</TestElement>
      </Layout.FlexItem>
      <Layout.FlexItem
        size={{
          small: 2,
          medium: 1,
          large: 2,
        }}
      >
        <TestElement style={colors[1]}>FlexItem</TestElement>
      </Layout.FlexItem>
      <Layout.FlexItem
        size={{
          xsmall: 4,
          small: 2,
          medium: 1,
          large: 1,
        }}
      >
        <TestElement style={colors[2]}>FlexItem</TestElement>
      </Layout.FlexItem>
      <Layout.FlexItem
        size={{
          xsmall: 4,
          small: 2,
          medium: 3,
          large: 4,
        }}
      >
        <TestElement style={colors[3]}>FlexItem</TestElement>
      </Layout.FlexItem>
    </Layout.FlexContainer>
  </CustomMediaQuery>,
)