Flex

Ready

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

Storybook docs

Preview

Open in Storybook

Properties

Property	Attribute	Type	Default	Description
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`none`	The surface theme of the flex container.
`split`	`split`	`boolean`	`false`	Applies space-between justification to the flex container.
`reversed`	`reversed`	`boolean`	`false`	Reverses the order of flex items. Use `reverse` instead.
`reverse`	`reverse`	`boolean`	`false`	Reverses the order of flex items. This only changes the visual order: keyboard and screen reader order still follow the markup, so don’t reverse content whose order matters (e.g. focusable media before its text) (WCAG 1.3.2).
`justifyContent`	`justify-content`	`startcenterspace-betweenspace-aroundend`	`start`	Sets the justify-content property for the flex container.
`alignItems`	`align-items`	`normalstartcenterend`	`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.

nbhd-flex::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-flex or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Property	Token	Value
`--nbhd-flex-alignItems`	—	`normal`
`--nbhd-flex-blockSize`	—	`auto`
`--nbhd-flex-flexDirection`	—	`column`
`--nbhd-flex-flexWrap`	—	`nowrap`
`--nbhd-flex-host-display`	—	`block`
`--nbhd-flex-inlineSize`	—	`auto`
`--nbhd-flex-justifyContent`	—	`normal`
`--nbhd-flex-minBlockSize`	—	`auto`
`--nbhd-flex-position`	—	`static`

Dependencies

Used by

Hero SplitReady <nbhd-hero-split> HumongotronReady <nbhd-humongotron> JumbotronReady <nbhd-jumbotron> MinitronReady <nbhd-minitron>