Layout | frus

📄️Container

One box that sizes, pads, colours, rounds, borders and shadows its child.

Empty space around a child, on every side or each side on its own.

Places one child somewhere inside the room it is given.

Children in a line, across or down, with alignment on both axes and spacing.

The flexbox line under Row and Column: shrink-wraps, stretches, wraps, reverses.

Share the free room of a row or a column between some of its children.

A box of a given size: to size its child, or, empty, as a fixed gap.

Floors and ceilings on a child's size, or the size its content would like.

Let a child be a size its parent did not offer.

A box whose height follows from its width.

Scales its child to fit its box, following a BoxFit rule.

A box sized as a fraction of the room its parent offers.

A row that flows onto new lines when it runs out of room.

Children layered in the same box, pinned to its edges or aligned in it.

Several children in one box, only one of them shown.

Lines text up on the line its letters sit on.

Turns its child by quarter turns, and the layout turns with it.

Keeps its child clear of status bars, notches, the gesture handle and the keyboard.

Builds from the room actually given, so a component adapts wherever it is placed.

Children measured and placed by a function you write.

A row of buttons that becomes a column when they stop fitting.

A list and its detail side by side when wide, one at a time when narrow.

A crossed box standing in for a widget not written yet.