Flex
ready

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

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdFlex } from '@fbin-web/neighborhood-core';
<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>

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
split split boolean false Applies space-between justification to the flex container.
reversed reversed 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.

CSS Properties

Property Default Value
--nbhd-flex-alignItems normal
--nbhd-flex-blockSize auto
--nbhd-flex-flexDirection row
--nbhd-flex-flexWrap nowrap
--nbhd-flex-inlineSize auto
--nbhd-flex-justifyContent normal
--nbhd-flex-minBlockSize auto
--nbhd-flex-position static