Alignment within components

Use Flexbox for one-dimensional arrangements such as toolbars, button groups, icon-label pairs, and tag lists. CSS Grid handles page regions that need alignment in both rows and columns; see page structure.

Wrap to fit the available space

A wrapping flex container can adapt without a viewport breakpoint:

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-size-small);
  align-items: center;
}

.toolbar-primary-action {
  flex: 1 0 auto;
}

Items wrap when their combined widths exceed the container. flex-grow lets an item use spare space. Check long labels and narrow containers when choosing its basis and minimum width.

Choose the alignment property

The axes depend on flex-direction: a row's main axis runs horizontally in a horizontal writing mode; a column's runs vertically. Use spacing tokens for gaps.

Reactive alignment in Lit

Use styleMap when alignment depends on component properties:

render() {
  const alignmentStyles = {
    justifyContent: this.centered ? 'center' : 'flex-start',
    flexDirection: this.vertical ? 'column' : 'row'
  };

  return html`
    <div style=${styleMap(alignmentStyles)}>
      <slot></slot>
    </div>
  `;
}

Prefer an existing layout component when it already supports the arrangement you need. The component reference lists the available controls.