Skip to main content

Flex

Overview​

The Flex component is a flex container with CSS's own defaults, taking the flex container's properties as props.

Reach for it for a layout of your own, such as a fixed side beside a growing one. It's a flex container with no display prop to remember: flexDirection, flexWrap, alignItems, justifyContent, alignContent and the gaps are its props, each on Bulma's helper classes, and flexGrow, flexShrink and alignSelf go on its children. Like the others, it zeroes its children's own block margins, so the gap is the only space between them.

For a column of Bulma blocks, Stack starts with Bulma's spacing in place, and for a row of controls, Group wraps and centers. Flex is still a flex container and nothing more: it renders one of a few structural elements and draws nothing of its own.

info

Bulma has no flex component, so Flex brings its own styles, in bestax.css and its variants, or in extras.css next to your own Bulma. It's a flex container in bestax-no-helpers.css too, though there its props have no helper class to add, so it stays a row with no gap.

Import​

import { Flex } from '@allxsmith/bestax-bulma';

Usage​

Basic Usage​

A row that doesn't wrap, with its children stretched to the same height, and a gap.

<Flex gap="2">
  <Box>One</Box>
  <Box>Two, with more to say than the first</Box>
</Flex>

A Fixed Side and a Growing One​

flexShrink="0" keeps the side at its own width, and flexGrow="1" gives the rest of the row to the main part.

<Flex gap="4" alignItems="flex-start">
  <Box flexShrink="0">
    <Menu>
      <Menu.Label>Account</Menu.Label>
      <Menu.List>
        <Menu.Item href="#profile">Profile</Menu.Item>
        <Menu.Item href="#billing">Billing</Menu.Item>
      </Menu.List>
    </Menu>
  </Box>
  <Box flexGrow="1">
    <Content>
      <p>The side keeps its width, and this part grows into the rest.</p>
    </Content>
  </Box>
</Flex>

Direction​

flexDirection turns the main axis. row-reverse and column-reverse change only what's seen: a screen reader still reads the children, and Tab still moves through them, in their own order.

<Flex flexDirection="column" alignItems="flex-start" gap="2">
  <Button color="primary">First</Button>
  <Button>Second</Button>
</Flex>

Wrapping​

flexWrap="wrap" moves children to a new line when they don't fit, and rowGap and columnGap space the two directions apart differently.

<Flex flexWrap="wrap" columnGap="3" rowGap="1">
  {Array.from({ length: 10 }, (_, i) => (
    <Button key={i} size="small">
      Item {i + 1}
    </Button>
  ))}
</Flex>

Accessibility​

  • No role of its own: a Flex adds nothing to the accessibility tree, apart from role="list" on a ul or ol, which Safari otherwise drops once Bulma's reset hides the markers.
  • Reversed directions: row-reverse and column-reverse change what's seen and not the reading or Tab order, so what's seen and what's read can disagree (WCAG 1.3.2 Meaningful Sequence and 2.4.3 Focus Order). Use them only where the order doesn't carry meaning, or put the children in the order you want them read.
  • Landmarks: with as="nav", "aside", "section" or "main", the Flex is the landmark. A section is a region only once it has a name.
  • Stack: A column with Bulma's block spacing.
  • Group: A row that wraps and centers, which can stack on a phone.
  • Center: Centers its content on both axes.
  • Columns: Columns sized in fractions of the row, stacked on a phone.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​

Props​

PropTypeDefaultDescription
asLayoutElement'div'The element to render. With ul or ol, give it li children: it restates role="list", which Bulma's list reset takes away in Safari.
flexDirection(typeof validFlexDirections)[number]'row'The main axis. row-reverse and column-reverse change only what's seen: reading and Tab order still follow the children's order (WCAG 1.3.2 and 2.4.3). Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
flexWrap(typeof validFlexWraps)[number]'nowrap'Whether children move to a new line when they don't fit. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
alignItems(typeof validAlignItems)[number]'stretch'How each child sits across the main axis. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
justifyContent(typeof validJustifyContents)[number]—Where the children sit along the main axis. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
alignContent(typeof validAlignContents)[number]—How wrapped lines share the space across the main axis. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
gapBulmaGapStep—Space between children, a step of Bulma's gap scale. None by default. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
rowGapBulmaGapStep—Space between wrapped lines, when it differs from gap. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
columnGapBulmaGapStep—Space between children along a row, when it differs from gap. Needs Bulma's helper classes: under bestax-no-helpers.css the default stays.
classNamestring—Additional CSS classes.
childrenReact.ReactNode—What it lays out. The top and bottom margins Bulma gives them are zeroed, so gap is the only space between them, and a spacing helper such as mt="2" still adds to it. A Columns child keeps its own top and side margins, and takes at the bottom the one Bulma gives the last Columns in a container, the column gap pulled back in (none when gapless), so its columns line up. A Pagination child keeps its negative margins too, so its links line up.
textColorBulma color | 'inherit' | 'current'—Text color helper.
bgColorBulma color | 'inherit' | 'current'—Background color helper.
refPolymorphicRef<LayoutElement>—Ref forwarded to the element as renders.
...Remaining props of the element selected by as and Bulma helper props—See Helper Props

Types:

  • BulmaGapStep: '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '4.5' | '5' | '5.5' | '6' | '6.5' | '7' | '7.5' | '8' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8 — A gap step as gap, columnGap and rowGap take it: a value from validGaps, or the same step written as a number (gap={2}, gap={1.5}). Grid took its gaps as numbers before the gap helpers were shared, so every gap prop still does.
  • LayoutElement: 'div' | 'main' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'form' | 'fieldset' — The elements Stack, Group, Center and Flex can render as: Container's landmarks and sections, a list, a form or a fieldset.