Flex
ready

A flexible layout component for arranging child elements with customizable spacing and alignment options.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdFlex } from '@fbin-web/neighborhood-core';
<nbhd-playground surface="primary">
  <nbhd-flex justify-content="start" align-items="normal">
    <nbhd-text tag="div">
      Flex Item 1 Content can be longer to demonstrate wrapping behavior.
    </nbhd-text>
    <nbhd-text tag="div">
      Flex Item 2
    </nbhd-text>
  </nbhd-flex>
</nbhd-playground>

React 

import { NbhdFlex, NbhdText } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdFlex
      justifyContent="start"
      alignItems="normal">
      <NbhdText tag="div">
        Flex Item 1 Content can be longer to demonstrate wrapping behavior.
      </NbhdText>
      <NbhdText tag="div">Flex Item 2</NbhdText>
    </NbhdFlex>
  </>
);

Properties

Property Attribute Type Default Description
surface surface none | primary | secondary | inverse | inverse-secondary none The surface theme of the flex container.
split split boolean false Applies space-between justification to the flex container.
reversed Deprecated reversed boolean false Reverses the order of flex items. Use reverse instead.
reverse reverse boolean false Reverses the order of flex items.
justifyContent justify-content start | center | space-between | space-around | end start Sets the justify-content property for the flex container.
alignItems align-items normal | start | center | end normal Sets the align-items property for the flex container.

Slots

Name Description
(default) The flex items to be arranged in the flex container.

CSS Parts

Name Description
base The flex container div element.
content The slot container for the flex items.