flexbox

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Flex container display classes

Use `.d-flex` to make an element behave like a block and lay out its content using the flexbox model. Use `.d-inline-flex` to make an element behave like an inline element and lay out its content using the flexbox model. Each direct child of the flex container becomes a flex item.

Flex direction classes

The following classes define the orientation of the main axis: `.flex-row` sets flex-direction to row (default, main axis runs left to right); `.flex-row-reverse` sets flex-direction to row-reverse (main axis runs right to left); `.flex-column` sets flex-direction to column (main axis runs top to bottom); `.flex-column-reverse` sets flex-direction to column-reverse (main axis runs bottom to top).

Flex wrap classes

The following classes control wrapping behavior: `.flex-nowrap` sets flex-wrap to nowrap, forcing flex items into a single line even if they overflow; `.flex-wrap` sets flex-wrap to wrap (default), allowing items to break onto multiple lines; `.flex-wrap-reverse` behaves like wrap but with cross-start and cross-end permuted.

Justify content classes

The following classes distribute space between and around flex items along the main axis: `.flex-justify-start` justifies all items to the left; `.flex-justify-end` justifies all items to the right; `.flex-justify-center` justifies items to the center of the container; `.flex-justify-between` distributes items evenly with the first item on the start line and the last item on the end line; `.flex-justify-around` distributes items evenly with equal space around them.

Align items classes

The following classes align items on the cross axis, which runs perpendicular to the main axis: `.flex-items-start` aligns items to the start of the cross axis; `.flex-items-end` aligns items to the end of the cross axis; `.flex-items-center` aligns items to the center of the cross axis; `.flex-items-baseline` aligns items along their baselines; `.flex-items-stretch` stretches items from start of cross axis to end of cross axis.

Align content classes

When the main axis wraps, creating multiple main axis lines, the following classes align those lines on the cross axis: `.flex-content-start` aligns content to the start of the cross axis; `.flex-content-end` aligns content to the end of the cross axis; `.flex-content-center` aligns content to the center of the cross axis; `.flex-content-between` distributes content evenly with the first line on the start of the cross axis and the last line on the end of the cross axis; `.flex-content-around` distributes content evenly with equal space around them; `.flex-content-stretch` lines stretch to occupy available space.

Flex sizing classes

The following classes specify the ability of a flex item to alter its dimensions to fill available space: `.flex-1` fills available space; `.flex-auto` fills available space and auto-sizes based on the content; `.flex-grow-0` prevents growing of a flex item; `.flex-shrink-0` prevents shrinking of a flex item.

Align self classes

The following classes adjust the alignment of an individual flex item on the cross axis, overriding any align-items property applied to the flex container: `.flex-self-auto` inherits alignment from parent; `.flex-self-start` aligns to the start of the cross axis; `.flex-self-end` aligns to the end of the cross axis; `.flex-self-center` aligns to center of cross axis; `.flex-self-baseline` aligns baseline to the start of the cross axis; `.flex-self-stretch` stretches item from start of cross axis to end of cross axis.

Order classes

The following classes change the order of flex items: `.flex-order-1` sets order to 1; `.flex-order-2` sets order to 2; `.flex-order-none` removes order by setting it to inherit (typically used with responsive variants). Note that order does not affect screen readers or keyboard navigation; keep markup in logical source order.

Responsive flexbox utilities

All flexbox utilities can be adjusted per breakpoint using the formulas: `d-[breakpoint]-[property]` for display properties; `flex-[breakpoint]-[property]-[behavior]` for various flex properties. Each responsive style is applied to the specified breakpoint and up. Example classes include `.d-sm-flex`, `.d-md-inline-flex`, `.flex-lg-row`, `.flex-xl-column`, `.flex-sm-wrap`, `.flex-lg-nowrap`, `.flex-lg-self-start`.

Flex item minimum content sizing bug workaround

Some browsers do not respect the minimum content size of flex items, causing items to shrink below their minimum size and create undesirable results such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using the `flex-shrink-0` utility class.

Elements that cannot be flex containers

The `<button>`, `<fieldset>`, and `<summary>` elements cannot be styled with `display: flex` in Safari. Instead of using `class="d-flex"` on these elements, nest an element within them, for example: `<summary><div class="d-flex">...</div></summary>`.

Give your agent this brain