ba-flex
This component provides a flex layout for items should be laid out side by side, or that can wrap onto the next line.
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
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.
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:
Code
Properties & 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 | string | undefined |
undefined |
columnGutter320vw
|
column-gutter-320vw |
Set's the gutter between columns of the grid at 320px and wider | string | undefined |
'8' |
columnGutter480vw
|
column-gutter-480vw |
Set's the gutter between columns of the grid at 480px and wider | string | undefined |
undefined |
columnGutter640vw
|
column-gutter-640vw |
Set's the gutter between columns of the grid at 640px and wider | string | undefined |
undefined |
columnGutter800vw
|
column-gutter-800vw |
Set's the gutter between columns of the grid at 800px and wider | string | undefined |
undefined |
rowGutter1024vw
|
row-gutter-1024vw |
Set's the gutter between rows of the grid at 1024px and wider | string | undefined |
undefined |
rowGutter320vw
|
row-gutter-320vw |
Set's the gutter between rows of the grid at 320px and wider | string | undefined |
'8' |
rowGutter480vw
|
row-gutter-480vw |
Set's the gutter between rows of the grid at 480px and wider | string | undefined |
undefined |
rowGutter640vw
|
row-gutter-640vw |
Set's the gutter between rows of the grid at 640px and wider | string | undefined |
undefined |
rowGutter800vw
|
row-gutter-800vw |
Set's the gutter between rows of the grid at 800px and wider | string | undefined |
undefined |
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‑global>, <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‑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‑loading‑skeleton>, <ba‑logo>, <ba‑media‑object>, <ba‑message>, <ba‑radio‑group>, <ba‑select>, <ba‑star‑rating>, <ba‑tag>, <div>, <fieldset>, <form>, <nav>, <section>, <svg>, <ul> |
Parent components
ba-flex can be slotted into:
<ba‑accordion><ba‑card><ba‑card‑segmented><ba‑details><ba‑flex><ba‑form><ba‑form‑group><ba‑grid><ba‑header‑global><ba‑hero><ba‑input‑password><ba‑message><ba‑message‑global><ba‑page‑segment>
Usage
All the column and row properties 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 property 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
Examples:
<ba-flex>
<div></div>
<div></div>
<div></div>
</ba-flex>
Aligning the 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-x properties. 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.
Examples
<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-x properties. 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.
Examples
<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>