Utilities to manage the layout, alignment and sizing of flex items and components with a suite of responsive flexbox utilities.
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
Note: Grid rows (nsw-row) already set display: flex, so you do not need nsw-display-flex on them. In grid layouts, the nsw-col children are flex items, so these utilities (including order) apply to those columns.
Set the direction of flex items in a flex container with direction utilities.
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis. Choose from start (browser default), end, center, between, around, or evenly.
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis. Choose from start, end, center, baseline, or stretch (browser default).
Use align-self utilities on flexbox items to individually change their alignment on the cross axis. Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).
Order utilities change the visual position of flex items without changing their position in the DOM.
This means they affect what people see, but not the order that screen readers or keyboard users experience. For this reason, order utilities should only be used for layout presentation, not to change reading or interaction order.
Maintain a meaningful DOM order first. When visual reordering is needed, apply order utilities at a breakpoint (for example lg) so the base mobile sequence remains logical and consistent. If the intended reading or focus order must change, update the HTML/DOM order instead of relying on order utilities.
If you are unfamiliar with the difference between visual order and DOM order, see Alternating layouts.
nsw-order-lg-first/nsw-order-lg-last)This is the preferred approach for responsive alternating layouts. Keep the DOM in a logical reading sequence, then swap visual placement from a breakpoint.
nsw-order-lg-1/nsw-order-lg-2)Numeric order utilities are an advanced option and are best reserved for constraints where DOM order cannot be changed. If used, prefer breakpoint-qualified classes so mobile keeps the default logical sequence.
order with careOrder utilities only affect visual presentation. Screen readers and keyboard navigation still follow the DOM.
Only use order when items communicate the same, non-functional message, such as paired image and text content. Always keep the HTML order logical and meaningful for reading and focus, then apply nsw-order-* classes only as a visual enhancement where this does not change the intended sequence.
This guidance helps meet WCAG 2.2 SC 1.3.2 (Meaningful Sequence) and 2.4.3 (Focus Order). See Alternating layouts for guidance.