Flex

Bulma provides comprehensive flexbox helpers that give you full control over flex container and flex item behavior. Combined with display="flex", all of the flexbox CSS properties are available as helper classes in bestax-bulma.

Composable hook

These props are also available standalone via the useFlexboxClasses hook (container classes only emit when a display prop is flex or inline-flex) — see Composable Mini-Hooks.

Reference

This page documents the bestax-bulma prop API for Bulma's flexbox helpers. For the underlying CSS utilities, see the official Bulma flexbox helpers.

tip

All components in bestax-bulma have access to these flexbox properties through the useBulmaClasses hook. You can apply flexbox properties to any component in the library to create sophisticated responsive layouts.

Overview

Flexbox (Flexible Box Layout) is a powerful CSS layout method that allows you to arrange elements in a container with precise control over their alignment, direction, order, and size. Bulma's flexbox helpers cover all the essential flexbox properties:

• flex-direction - Controls the main axis direction
• flex-wrap - Controls whether items wrap to new lines
• justify-content - Aligns items along the main axis
• align-content - Aligns wrapped lines
• align-items - Aligns items along the cross axis
• align-self - Overrides align-items for individual items
• flex-grow - Controls how much an item should grow
• flex-shrink - Controls how much an item should shrink

The gap helpers put space between the items, on a flex container or a grid.

Flex Direction

The flexDirection prop controls the direction of the main axis in a flex container. This determines how flex items are laid out within the container.

Property	Bulma Class	CSS Property
flexDirection="row"	is-flex-direction-row	flex-direction: row
flexDirection="row-reverse"	is-flex-direction-row-reverse	flex-direction: row-reverse
flexDirection="column"	is-flex-direction-column	flex-direction: column
flexDirection="column-reverse"	is-flex-direction-column-reverse	flex-direction: column-reverse

Flex Direction Examples

import { Box, Button, Card } from '@allxsmith/bestax-bulma';

function FlexDirectionExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Row Direction (Default)</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box display="flex" flexDirection="row" bgColor="light" p="3">
            <Button color="primary" mr="2">
              Item 1
            </Button>
            <Button color="info" mr="2">
              Item 2
            </Button>
            <Button color="success">Item 3</Button>
          </Box>
        </Card.Content>
      </Card>

      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Row Reverse</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box display="flex" flexDirection="row-reverse" bgColor="light" p="3">
            <Button color="primary" ml="2">
              Item 1
            </Button>
            <Button color="info" ml="2">
              Item 2
            </Button>
            <Button color="success">Item 3</Button>
          </Box>
        </Card.Content>
      </Card>

      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Column Direction</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box display="flex" flexDirection="column" bgColor="light" p="3">
            <Button color="primary" mb="2">
              Item 1
            </Button>
            <Button color="info" mb="2">
              Item 2
            </Button>
            <Button color="success">Item 3</Button>
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>Column Reverse</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Box
            display="flex"
            flexDirection="column-reverse"
            bgColor="light"
            p="3"
          >
            <Button color="primary" mt="2">
              Item 1
            </Button>
            <Button color="info" mt="2">
              Item 2
            </Button>
            <Button color="success">Item 3</Button>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Flex Wrap

The flexWrap prop controls whether flex items wrap to new lines when they exceed the container width. This is essential for responsive layouts.

Property	Bulma Class	CSS Property
flexWrap="nowrap"	is-flex-wrap-nowrap	flex-wrap: nowrap
flexWrap="wrap"	is-flex-wrap-wrap	flex-wrap: wrap
flexWrap="wrap-reverse"	is-flex-wrap-wrap-reverse	flex-wrap: wrap-reverse

Flex Wrap Examples

import { Box, Tag, Card, Content } from '@allxsmith/bestax-bulma';

function FlexWrapExamples() {
  const tags = [
    'JavaScript',
    'TypeScript',
    'React',
    'Vue',
    'Angular',
    'Svelte',
    'Next.js',
    'Nuxt.js',
  ];

  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>No Wrap (Default)</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            Items overflow the container when they don't fit:
          </Content>
          :::tip[Try This Resize your browser window to see the tags overflow]
          horizontally when the container becomes too narrow. :::
          <Box display="flex" flexWrap="nowrap" bgColor="light" p="3">
            {tags.map((tag, index) => (
              <Tag key={index} color="info" mr="2">
                {tag}
              </Tag>
            ))}
          </Box>
        </Card.Content>
      </Card>

      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Wrap</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">Items wrap to new lines when they don't fit:</Content>
          <Box display="flex" flexWrap="wrap" bgColor="light" p="3">
            {tags.map((tag, index) => (
              <Tag key={index} color="primary" mr="2" mb="2">
                {tag}
              </Tag>
            ))}
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>Wrap Reverse</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">Items wrap to new lines in reverse order:</Content>
          <Box display="flex" flexWrap="wrap-reverse" bgColor="light" p="3">
            {tags.map((tag, index) => (
              <Tag key={index} color="success" mr="2" mt="2">
                {tag}
              </Tag>
            ))}
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Justify Content

The justifyContent prop controls how flex items are aligned along the main axis. This determines the distribution of space between and around items.

Property	Bulma Class	CSS Property
justifyContent="flex-start"	is-justify-content-flex-start	justify-content: flex-start
justifyContent="flex-end"	is-justify-content-flex-end	justify-content: flex-end
justifyContent="center"	is-justify-content-center	justify-content: center
justifyContent="space-between"	is-justify-content-space-between	justify-content: space-between
justifyContent="space-around"	is-justify-content-space-around	justify-content: space-around
justifyContent="space-evenly"	is-justify-content-space-evenly	justify-content: space-evenly
justifyContent="start"	is-justify-content-start	justify-content: start
justifyContent="end"	is-justify-content-end	justify-content: end
justifyContent="left"	is-justify-content-left	justify-content: left
justifyContent="right"	is-justify-content-right	justify-content: right

Justify Content Examples

import { Box, Button, Card, Content } from '@allxsmith/bestax-bulma';

function JustifyContentExamples() {
  const justifyOptions = [
    { value: 'flex-start', label: 'Flex Start' },
    { value: 'center', label: 'Center' },
    { value: 'flex-end', label: 'Flex End' },
    { value: 'space-between', label: 'Space Between' },
    { value: 'space-around', label: 'Space Around' },
    { value: 'space-evenly', label: 'Space Evenly' },
  ];

  return (
    <Box p="4">
      {justifyOptions.map(({ value, label }) => (
        <Card key={value} mb="4">
          <Card.Header>
            <Card.Header.Title>{label}</Card.Header.Title>
          </Card.Header>
          <Card.Content>
            <Box
              display="flex"
              justifyContent={value as any}
              bgColor="light"
              p="3"
            >
              <Button color="primary" size="small">
                A
              </Button>
              <Button color="info" size="small">
                B
              </Button>
              <Button color="success" size="small">
                C
              </Button>
            </Box>
          </Card.Content>
        </Card>
      ))}
    </Box>
  );
}

Align Content

The alignContent prop controls how wrapped flex lines are aligned along the cross axis. This only applies when there are multiple lines of flex items.

Property	Bulma Class	CSS Property
alignContent="flex-start"	is-align-content-flex-start	align-content: flex-start
alignContent="flex-end"	is-align-content-flex-end	align-content: flex-end
alignContent="center"	is-align-content-center	align-content: center
alignContent="space-between"	is-align-content-space-between	align-content: space-between
alignContent="space-around"	is-align-content-space-around	align-content: space-around
alignContent="space-evenly"	is-align-content-space-evenly	align-content: space-evenly
alignContent="stretch"	is-align-content-stretch	align-content: stretch

Align Content Examples

import { Box, Tag, Card, Content } from '@allxsmith/bestax-bulma';

function AlignContentExamples() {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];

  const alignOptions = [
    { value: 'flex-start', label: 'Flex Start' },
    { value: 'center', label: 'Center' },
    { value: 'flex-end', label: 'Flex End' },
    { value: 'space-between', label: 'Space Between' },
    { value: 'space-around', label: 'Space Around' },
    { value: 'stretch', label: 'Stretch' },
  ];

  return (
    <Box p="4">
      <Content mb="4">
        <strong>Note:</strong> align-content only affects containers with
        multiple lines of wrapped items.
      </Content>

      {alignOptions.map(({ value, label }) => (
        <Card key={value} mb="4">
          <Card.Header>
            <Card.Header.Title>{label}</Card.Header.Title>
          </Card.Header>
          <Card.Content>
            <Box
              display="flex"
              flexWrap="wrap"
              alignContent={value as any}
              bgColor="light"
              p="3"
              style={{ height: '150px' }}
            >
              {items.map((item, index) => (
                <Tag key={index} color="info" mr="1" mb="1">
                  {item}
                </Tag>
              ))}
            </Box>
          </Card.Content>
        </Card>
      ))}
    </Box>
  );
}

Align Items

The alignItems prop controls how flex items are aligned along the cross axis. This affects all items in the flex container.

Property	Bulma Class	CSS Property
alignItems="stretch"	is-align-items-stretch	align-items: stretch
alignItems="flex-start"	is-align-items-flex-start	align-items: flex-start
alignItems="flex-end"	is-align-items-flex-end	align-items: flex-end
alignItems="center"	is-align-items-center	align-items: center
alignItems="baseline"	is-align-items-baseline	align-items: baseline
alignItems="start"	is-align-items-start	align-items: start
alignItems="end"	is-align-items-end	align-items: end

Align Items Examples

import { Box, Button, Card, Content } from '@allxsmith/bestax-bulma';

function AlignItemsExamples() {
  const alignOptions = [
    { value: 'stretch', label: 'Stretch (Default)' },
    { value: 'flex-start', label: 'Flex Start' },
    { value: 'center', label: 'Center' },
    { value: 'flex-end', label: 'Flex End' },
    { value: 'baseline', label: 'Baseline' },
  ];

  return (
    <Box p="4">
      {alignOptions.map(({ value, label }) => (
        <Card key={value} mb="4">
          <Card.Header>
            <Card.Header.Title>{label}</Card.Header.Title>
          </Card.Header>
          <Card.Content>
            <Box display="flex" alignItems={value as any} bgColor="light" p="3">
              <Button color="primary" size="small" mr="2">
                Small
              </Button>
              <Button color="info" mr="2">
                Medium
              </Button>
              <Button color="success" size="large">
                Large
              </Button>
            </Box>
          </Card.Content>
        </Card>
      ))}
    </Box>
  );
}

Align Self

The alignSelf prop allows individual flex items to override the alignItems value set on their container. This provides fine-grained control over individual item alignment.

Property	Bulma Class	CSS Property
alignSelf="auto"	is-align-self-auto	align-self: auto
alignSelf="flex-start"	is-align-self-flex-start	align-self: flex-start
alignSelf="flex-end"	is-align-self-flex-end	align-self: flex-end
alignSelf="center"	is-align-self-center	align-self: center
alignSelf="baseline"	is-align-self-baseline	align-self: baseline
alignSelf="stretch"	is-align-self-stretch	align-self: stretch

The alignSelf prop allows individual flex items to override the alignItems value set on their container. This property applies to elements that are flex items (children of a flex container), not to the flex container itself.

Important: The element using alignSelf doesn't need display="flex" - it just needs to be a child of a flex container.

Align Self Examples

import { Box, Button, Card, Content } from '@allxsmith/bestax-bulma';

function AlignSelfExamples() {
  return (
    <Box p="4">
      <Card>
        <Card.Header>
          <Card.Header.Title>Individual Item Alignment</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            Container has alignItems="flex-start", but individual items override
            with alignSelf:
          </Content>
          <Box
            display="flex"
            alignItems="flex-start"
            bgColor="light"
            p="3"
            style={{ height: '150px' }}
          >
            <Button color="primary" alignSelf="flex-start" mr="2">
              Flex Start
            </Button>
            <Button color="info" alignSelf="center" mr="2">
              Center
            </Button>
            <Button color="success" alignSelf="flex-end" mr="2">
              Flex End
            </Button>
            <Button color="warning" alignSelf="stretch">
              Stretch
            </Button>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Flex Grow and Shrink

The flexGrow and flexShrink props control how flex items grow and shrink relative to each other. These properties are essential for creating responsive layouts where items adjust their size based on available space.

Flex Grow

Property	Bulma Class	CSS Property
flexGrow="0"	is-flex-grow-0	flex-grow: 0
flexGrow="1"	is-flex-grow-1	flex-grow: 1
flexGrow="2"	is-flex-grow-2	flex-grow: 2
flexGrow="3"	is-flex-grow-3	flex-grow: 3
flexGrow="4"	is-flex-grow-4	flex-grow: 4
flexGrow="5"	is-flex-grow-5	flex-grow: 5

Flex Shrink

Property	Bulma Class	CSS Property
flexShrink="0"	is-flex-shrink-0	flex-shrink: 0
flexShrink="1"	is-flex-shrink-1	flex-shrink: 1
flexShrink="2"	is-flex-shrink-2	flex-shrink: 2
flexShrink="3"	is-flex-shrink-3	flex-shrink: 3
flexShrink="4"	is-flex-shrink-4	flex-shrink: 4
flexShrink="5"	is-flex-shrink-5	flex-shrink: 5

Flex Grow and Shrink Examples

import { Box, Button, Card, Content } from '@allxsmith/bestax-bulma';

function FlexGrowShrinkExamples() {
  return (
    <Box p="4">
      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Flex Grow</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            Items grow to fill available space based on their flex-grow value:
          </Content>
          <Box display="flex" bgColor="light" p="3" style={{ height: '150px' }}>
            <Button color="primary" flexGrow="0" mr="2">
              Grow 0 (Fixed)
            </Button>
            <Button color="info" flexGrow="1" mr="2">
              Grow 1
            </Button>
            <Button color="success" flexGrow="2">
              Grow 2 (2x as much)
            </Button>
          </Box>
        </Card.Content>
      </Card>

      <Card mb="4">
        <Card.Header>
          <Card.Header.Title>Flex Shrink</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            Items shrink when space is limited based on their flex-shrink value:
          </Content>
          <Box display="flex" bgColor="light" p="3" style={{ height: '150px' }}>
            <Button color="primary" flexShrink="0" mr="2">
              No Shrink
            </Button>
            <Button color="info" flexShrink="1" mr="2">
              Shrink 1
            </Button>
            <Button color="success" flexShrink="3">
              Shrink 3
            </Button>
          </Box>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Header.Title>Combined Grow and Shrink</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <Content mb="3">
            Responsive layout that adapts to container size:
          </Content>
          <Box display="flex" bgColor="light" p="3" style={{ height: '150px' }}>
            <Box
              bgColor="primary"
              textColor="white"
              p="2"
              mr="2"
              flexGrow="1"
              flexShrink="1"
              textAlign="centered"
            >
              Sidebar (1:1)
            </Box>
            <Box
              bgColor="info"
              textColor="white"
              p="2"
              mr="2"
              flexGrow="3"
              flexShrink="1"
              textAlign="centered"
            >
              Main Content (3:1)
            </Box>
            <Box
              bgColor="success"
              textColor="white"
              p="2"
              flexGrow="1"
              flexShrink="2"
              textAlign="centered"
            >
              Aside (1:2)
            </Box>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Gap

The gap helpers put space between the items of a flex container, or the cells of a grid, without a margin on any of the items. gap spaces both axes, and columnGap and rowGap set one.

Property	Bulma Class	CSS Property
gap="2"	is-gap-2	gap: 1rem
columnGap="2"	is-column-gap-2	column-gap: 1rem
rowGap="2"	is-row-gap-2	row-gap: 1rem
gapless	is-gapless	gap: 0

Each whole step is 0.5rem, from 0 up to 8 (4rem), with a half step between each pair, such as "1.5" for 0.75rem. That is not the margin scale: gap="2" is 1rem where m="2" is 0.5rem. A step can also be written as a number (gap={2}).

The helpers set the CSS gap, so they only take effect on a flex or grid container. Components that already are one, such as Buttons, Tags and Grid, take them as they are, and the helper replaces the spacing Bulma gives them.

gapless is the shortcut for gap="0", and gap wins when both are set. columnGap and rowGap win on their own axis over either.

Gap Examples

A row of items, spaced apart and centered on each other:

<Block display="flex" alignItems="center" flexWrap="wrap" gap="2">
  <Button color="primary">Save</Button>
  <Button>Cancel</Button>
  <Span textColor="grey">Last saved a minute ago</Span>
</Block>

A vertical stack. Bulma's block elements, such as Notification and Box, bring their own bottom margin, which would add to the gap, so the example sets mb="0" on each:

<Block display="flex" flexDirection="column" gap="3">
  <Notification color="info" mb="0">
    First
  </Notification>
  <Notification color="success" mb="0">
    Second
  </Notification>
  <Notification color="warning" mb="0">
    Third
  </Notification>
</Block>

Different spacing on each axis, with wrapping:

<Tags columnGap="4" rowGap="1">
  {['React', 'TypeScript', 'Bulma', 'Sass', 'Vite', 'Storybook', 'Jest'].map(
    name => (
      <Tag key={name} color="link">
        {name}
      </Tag>
    )
  )}
</Tags>

Grid takes gap, columnGap and rowGap as its own props and renders these same classes. Columns has a gap of its own for its gutters, which takes whole steps; see Columns.

Complete Layout Example

Here's a comprehensive example showing how to combine multiple flexbox properties to create a complex, responsive layout:

// import {
//   Box,
//   Card,
//   Title,
//   Content,
//   Button,
//   Tag,
// } from '@allxsmith/bestax-bulma';

function ComplexFlexboxLayout() {
  return (
    <Box p="4">
      <Card>
        <Card.Header>
          <Card.Header.Title>Complex Flexbox Layout</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          {/* Main container */}
          <Box display="flex" flexDirection="column">
            {/* Header */}
            <Box
              display="flex"
              justifyContent="space-between"
              alignItems="center"
              bgColor="primary"
              textColor="white"
              p="3"
              flexShrink="0"
            >
              <Title size="5" textColor="white" mb="0">
                Dashboard
              </Title>
              <Box display="flex" alignItems="center">
                <Tag color="light" mr="2">
                  Status: Online
                </Tag>
                <Button color="light" size="small">
                  Settings
                </Button>
              </Box>
            </Box>

            {/* Content area */}
            <Box display="flex" flexGrow="1">
              {/* Sidebar */}
              <Box flexShrink="0" mb="0">
                <strong>Navigation</strong>
                <ul>
                  <li>Dashboard</li>
                  <li>Analytics</li>
                  <li>Reports</li>
                  <li>Settings</li>
                </ul>
              </Box>

              {/* Main content */}
              <Box flexGrow="1" p="4" display="flex" flexDirection="column">
                <Title size="4" mb="3">
                  Welcome to the Dashboard
                </Title>

                {/* Cards grid */}
                <Box
                  display="flex"
                  flexWrap="wrap"
                  justifyContent="space-between"
                  flexGrow="1"
                >
                  <Box
                    bgColor="info"
                    textColor="white"
                    p="3"
                    mb="3"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                  >
                    Card 1
                  </Box>
                  <Box
                    bgColor="success"
                    textColor="white"
                    p="3"
                    mb="3"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                  >
                    Card 2
                  </Box>
                  <Box
                    bgColor="warning"
                    textColor="white"
                    p="3"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                  >
                    Card 3
                  </Box>
                  <Box
                    bgColor="danger"
                    textColor="white"
                    p="3"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                  >
                    Card 4
                  </Box>
                </Box>
              </Box>
            </Box>

            {/* Footer */}
            <Box
              display="flex"
              justifyContent="center"
              alignItems="center"
              bgColor="dark"
              textColor="white"
              p="2"
              flexShrink="0"
            >
              <Content textColor="white" mb="0" textAlign="centered">
                © 2025 Your Company. All rights reserved.
              </Content>
            </Box>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}

Best Practices

Flexbox Guidelines

1. Start with display="flex": Always set display="flex" on the container before using flexbox properties
2. Understand the axes: Remember that flexbox has a main axis (flex-direction) and a cross axis (perpendicular)
3. Use semantic properties: Choose properties that clearly express your layout intent
4. Combine with responsive props: Use viewport props for responsive flexbox layouts
5. Test with different content: Ensure your layout works with varying content sizes

Common Flexbox Patterns

import { Box, Title, Button, Content } from '@allxsmith/bestax-bulma';

function CommonFlexboxPatterns() {
  return (
    <Box p="4">
      {/* Centered content */}
      <Box mb="6">
        <Title size="5" mb="3">
          Centered Content
        </Title>
        <Box display="flex" justifyContent="center" alignItems="center">
          <Content mb="0" textAlign="centered">
            Perfectly centered
          </Content>
        </Box>
      </Box>

      {/* Navigation bar */}
      <Box mb="6">
        <Title size="5" mb="3">
          Navigation Bar Layout
        </Title>
        <Box
          display="flex"
          justifyContent="space-between"
          alignItems="center"
          bgColor="primary"
          textColor="white"
          p="3"
        >
          <Title textColor="white" mb="0">
            Logo
          </Title>
          <Box display="flex">
            <Button color="light" mr="2">
              Home
            </Button>
            <Button color="light" mr="2">
              About
            </Button>
            <Button color="light">Contact</Button>
          </Box>
        </Box>
      </Box>

      {/* Responsive grid alternative */}
      <Box mb="6">
        <Title size="5" mb="3">
          Responsive Grid Alternative
        </Title>
        <Box
          display="flex"
          flexWrap="wrap"
          justifyContent="space-between"
          p="3"
        >
          <Box
            mb="3"
            bgColor="info"
            textColor="white"
            p="3"
            textAlign="centered"
          >
            Card 1
          </Box>
          <Box
            mb="3"
            bgColor="success"
            textColor="white"
            p="3"
            textAlign="centered"
          >
            Card 2
          </Box>
          <Box
            mb="3"
            bgColor="warning"
            textColor="white"
            p="3"
            textAlign="centered"
          >
            Card 3
          </Box>
          <Box
            mb="3"
            bgColor="danger"
            textColor="white"
            p="3"
            textAlign="centered"
          >
            Card 4
          </Box>
        </Box>
      </Box>

      {/* Sticky footer layout */}
      <Box>
        <Title size="5" mb="3">
          Sticky Footer Layout
        </Title>
        <Box display="flex" flexDirection="column" bgColor="light">
          <Box bgColor="primary" textColor="white" p="3" textAlign="centered">
            Header
          </Box>
          <Box flexGrow="1" p="4" textAlign="centered">
            Main content area that grows to fill available space
          </Box>
          <Box bgColor="dark" textColor="white" p="3" textAlign="centered">
            Footer
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

Learn More

For detailed API information about flexbox properties, see the useBulmaClasses API documentation.

See Also

• useBulmaClasses - Complete flexbox property reference
• Visibility Helpers - Display and visibility utilities
• Responsive Design - Responsive flexbox techniques
• Layout Components - Layout components that use flexbox
• Bulma Flexbox Documentation - Official Bulma flexbox helpers