ba-flex
This component provides a flex layout for items that should be laid out side by side, or that can wrap onto the next line.
Airframe
Web Components
React
React Native
Picking between ba-flex and ba-grid
Use ba-flex for:
- Simple layouts where items can be sat side by side
- Layouts with dynamically sized items where set columns would cause layout shifts
Use ba-grid for:
- Complex layouts
- Layouts where multiple rows are required
Anatomy
Parent ba-flex
The outer flex container that arranges child elements in rows and controls wrapping behavior
Flex items
Child elements placed inside ba-flex that flow in source order and wrap to new rows when needed
Column gutters
Horizontal spacing between items in each row, configurable at viewport breakpoints
Row gutters
Vertical spacing between wrapped rows, configurable at viewport breakpoints
Design Documentation
If ba-image is being used, a width is required to be set on ba-image to make it show within the flex grid. This is because the way the aspect ratio gets set within ba-image results in the main component not having a width.
Live Demo
<ba-flex>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</ba-flex>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
alignContent |
align-content |
Which direction to align the content within the flex container | "right" | undefined |
undefined |
columnGutter1024vw |
column-gutter-1024vw |
Set's the gutter between columns of the grid at 1024px and wider | "16" | "24" | "32" | "40" | "64" | "8" | "96" | undefined |
undefined |
columnGutter320vw |
column-gutter-320vw |
Set's the gutter between columns of the grid at 320px and wider | "16" | "24" | "32" | "8" | undefined |
'8' |
columnGutter480vw |
column-gutter-480vw |
Set's the gutter between columns of the grid at 480px and wider | "16" | "24" | "32" | "8" | undefined |
undefined |
columnGutter640vw |
column-gutter-640vw |
Set's the gutter between columns of the grid at 640px and wider | "16" | "24" | "32" | "8" | undefined |
undefined |
columnGutter800vw |
column-gutter-800vw |
Set's the gutter between columns of the grid at 800px and wider | "16" | "24" | "32" | "40" | "64" | "8" | undefined |
undefined |
rowGutter1024vw |
row-gutter-1024vw |
Set's the gutter between rows of the grid at 1024px and wider | "16" | "24" | "32" | "40" | "8" | undefined |
undefined |
rowGutter320vw |
row-gutter-320vw |
Set's the gutter between rows of the grid at 320px and wider | "16" | "24" | "8" | undefined |
'8' |
rowGutter480vw |
row-gutter-480vw |
Set's the gutter between rows of the grid at 480px and wider | "16" | "24" | "8" | undefined |
undefined |
rowGutter640vw |
row-gutter-640vw |
Set's the gutter between rows of the grid at 640px and wider | "16" | "24" | "8" | undefined |
undefined |
rowGutter800vw |
row-gutter-800vw |
Set's the gutter between rows of the grid at 800px and wider | "16" | "24" | "32" | "40" | "8" | undefined |
undefined |
Permitted ARIA roles
- list
- listitem
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <a>, <article>, <aside>, <ba‑accordion>, <ba‑button>, <ba‑card>, <ba‑card‑segmented>, <ba‑chart‑price>, <ba‑checkbox>, <ba‑checkbox‑list>, <ba‑content>, <ba‑copy‑to‑clipboard>, <ba‑details>, <ba‑entry>, <ba‑flex>, <ba‑flight‑number>, <ba‑form>, <ba‑form‑group>, <ba‑form‑group‑dropdown>, <ba‑header‑list>, <ba‑icon>, <ba‑image>, <ba‑inline‑list>, <ba‑input>, <ba‑input‑date>, <ba‑input‑datepicker>, <ba‑input‑email>, <ba‑input‑number>, <ba‑input‑password>, <ba‑input‑phone‑number>, <ba‑input‑secure‑field>, <ba‑input‑stepper>, <ba‑input‑text>, <ba‑input‑textarea>, <ba‑input‑typeahead>, <ba‑input‑upload>, <ba‑link>, <ba‑link‑back>, <ba‑link‑entry>, <ba‑link‑price>, <ba‑link‑tile>, <ba‑loading‑skeleton>, <ba‑logo>, <ba‑media‑object>, <ba‑message>, <ba‑radio‑group>, <ba‑select>, <ba‑star‑rating>, <ba‑tab‑chip‑group>, <ba‑tag>, <div>, <fieldset>, <form>, <nav>, <section>, <svg>, <ul> |
Parent components
ba-flex can be slotted into:
<ba‑tab‑container‑content><ba‑tab‑chip‑content><ba‑page‑segment><ba‑message‑global><ba‑message><ba‑media‑object><ba‑input‑password><ba‑hero><ba‑header‑section><ba‑grid><ba‑form‑group><ba‑form><ba‑flex><ba‑details><ba‑card‑segmented><ba‑card><ba‑accordion>
Usage
Overview
All the column and row attributes on this component contain a number followed by vw which defines the viewport width (in pixels) that the value will be applied. The value provided will then persist at each wider viewport until another attribute has been set.
For example setting column-gutter-480vw and column-gutter-640vw attributes will:
- apply the default value for column gutters between viewport widths up to 479px
- apply the value set in
column-gutter-480vwbetween viewport widths of 480px and 639px - apply the value set in
column-gutter-640vwat all viewport widths larger than 640px
Wrapping items
If the amount of child items is larger than the width of ba-flex, they will get wrapped onto the next line automatically. Just the same as a normal Flexbox container would with the flex-wrap: wrap; property.
Basic usage
Aligning a group of items in a row is as simple as wrapping them with the ba-flex component.
<ba-flex>
<div></div>
<div></div>
<div></div>
</ba-flex>Aligning items to the right
<ba-flex align-content="right">
<div></div>
<div></div>
<div></div>
</ba-flex>Setting row spacing
The spacing (gutters) between the rows can be edited by passing a value to the row-gutter-<viewport>vw attributes. Row gutters by default will match the gutters between columns at each viewport. If a row gutter has been set then that value will persist across all larger viewports ignoring the default row gutter values.
<ba-flex row-gutter-480vw="16"> ... </ba-flex><ba-flex row-gutter-640vw="32"> ... </ba-flex><ba-flex row-gutter-480vw="32" row-gutter-800vw="24"> ... </ba-flex>Setting column spacing
The spacing (gutters) between the columns can be edited by passing a value to the column-gutter-<viewport>vw attributes. Column gutters by default will match the gutter between rows at each viewport. If a column gutter has been set then that value will persist across all larger viewports ignoring the default row gap values.
<ba-flex column-gutter-480vw="16"> ... </ba-flex><ba-flex column-gutter-640vw="32"> ... </ba-flex><ba-flex column-gutter-480vw="32" column-gutter-800vw="24"> ... </ba-flex>Guidelines
ba‑flex uses CSS flexbox which makes it easy to reverse and change the visual order that elements are displayed on the page. However visually re-arranging the UI so that it no longer matches the order of the source code causes accessibility issues.
Further reading:
Keyboard navigation
State: ba-flex is a layout container
Focus moves through interactive child elements in DOM source order
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-flex is used for arranging related items in a row that can wrap naturally onto new lines
- Responsive spacing is configured with viewport-specific row-gutter and column-gutter attributes where needed
- When using ba-image inside ba-flex, an explicit width is set so images render as expected
Accessibility checklist
- Visual order of items matches source order in the DOM
- ba-flex is not used to reverse or reorder content in a way that conflicts with reading order
- Keyboard focus order remains logical and follows source order across breakpoints
These checks are handled by the component and do not need to be repeated each time it is used.
- Gutter values apply correctly across breakpoints and persist until overridden
- ba-flex layout does not cause clipped or overlapping content at common viewport sizes
- Colour contrast for child content remains compliant in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments