Skip to main content

Justify

Horizontal alignment helpers for story content. Works in Grid and provides best‑effort behavior in Flex containers.

  • Available classes: justify-left, justify-center, justify-right.
  • Purpose: control horizontal alignment of an element via justify-self.
  • Scope: only applies inside Story content rendered by StoryContent.vue (styles are injected into a Shadow DOM and do not leak globally).

How It Works​

  • Grid: sets justify-self: start|center|end so items align within their grid area.
  • Flex column: maps to align-self: start|center|end (horizontal in this context).
  • Flex row: uses auto margins to approximate left/center/right when possible, and text-align for inline content inside the element.
  • Note: In flex rows where children flex (such as layout wrappers that stretch their children), item‑level horizontal alignment is limited by flex sizing rules; internal text/content alignment still applies.

Usage​

Inline in your story XML/HTML (rendered by StoryContent):

<!-- Centers a paragraph within its grid cell -->
<p class="justify-center">Centered paragraph in the story.</p>

<!-- Right-align an image within a grid cell -->
<img class="justify-right" src="/path/to/img.jpg" alt="…"/>

<!-- Make a single element a grid so justify-self applies to it directly -->
<div style="display: grid">
  <div class="justify-right">I align to the right</div>
</div>

<!-- Wrap several items in a simple grid to use justify-* on children -->
<div style="display: grid; grid-template-columns: 1fr;">
  <div class="justify-left">Left</div>
  <div class="justify-center">Center</div>
  <div class="justify-right">Right</div>
</div>
  • Vertical alignment helpers (align-top, align-center, align-bottom) use align-self and control the block/cross axis inside a grid. They can be combined with justify-*.
  • Flex-based wrappers (for example <r-row>) use Flexbox for their internal layout; justify-self does not apply to Flex items. Inside those wrappers, prefer their own layout props or use a nested grid wrapper if you need justify-* behavior for a child item.

Notes​

  • Class has no effect: ensure the element is a Grid item (e.g., its parent is display: grid, or the element itself is display: grid).
  • Works in Story preview but not app-wide: expected — these helpers exist only inside the Story Shadow DOM, not global styles.

Reference​

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