Flex Alignment

Three action chips move from normal document flow into a centered flex row with controlled alignment.

Program

Flexbox lays children along one axis. Justify-content works along the main axis; align-items works across it.

Figure: Flexbox main and cross axes. Model source: books/css/03flex_grid_layout/flex_alignment/diagrams/flex_alignment.semantic.json.

flex_alignment.html

<style>
.toolbar { display: flex; }
.toolbar { gap: 12px; }
.toolbar { justify-content: center; }
.toolbar { align-items: center; min-height: 110px; background: #eef2ff; }
</style>

<nav class="toolbar">
  <button>Back</button>
  <button>Preview</button>
  <button>Publish</button>
</nav>

main axis The main axis follows the flex-direction.

cross axis The cross axis runs perpendicular to the main axis.