Skip to main content

Align

Vertical alignment helpers for story content. Works in Grid and Flex; provides best‑effort behavior in flex columns using auto margins.

Usage​

<!-- Grid: align item within its cell -->
<div style="display: grid; grid-template-columns: 1fr; height: 160px; border: 1px solid #eee">
  <div class="align-bottom">Bottom</div>
  <!-- Also available: align-top, align-center -->
  <!-- Only the aligned item needs the class -->
<!-- Flex row: vertical alignment is the cross axis -->
<r-row style="height: 140px; --gap: 8px; border: 1px solid #eee">
  <div class="align-top">Top</div>
  <div class="align-center">Center</div>
  <div class="align-bottom">Bottom</div>
</r-row>
<!-- Flex column: main axis is vertical; auto margins help when there is free space -->
<r-column style="height: 180px; --gap: 8px; border: 1px solid #eee">
  <div>Header</div>
  <div class="align-center">Centered when space allows</div>
  <div class="align-bottom">Footer pinned to bottom</div>
</r-column>

How It Works​

  • Grid and flex rows: sets align-self: start|center|end to control the block/cross axis.
  • Flex columns: uses margin-block-start/end: auto to center or pin to bottom when there is available vertical space.
  • These helpers affect the element’s box; inner text alignment is unaffected (use text-align or the justify-* helpers for horizontal text alignment).
  • See Justify for horizontal alignment helpers.

Notes​

  • In flex columns, align-* influences positioning only when there is extra space in the container's height.
  • You can combine align-* and justify-* on the same element to position on both axes.

Reference​

  • Source: network-web/src/designSystem/css/base.css
  • Component: network-web/src/pages/story/components/StoryContent.vue