Skip to main content

Flexbox Utilities

Flexbox Utilities​

Justify Content (Horizontal Alignment)​

Horizontal Alignment Examples
<div class="nvs-row nvs-jc-start">Align Left</div>
<div class="nvs-row nvs-jc-center">Center</div>
<div class="nvs-row nvs-jc-end">Align Right</div>
<div class="nvs-row nvs-jc-between">Equal space between</div>
<div class="nvs-row nvs-jc-around">Equal space around</div>
<div class="nvs-row nvs-jc-evenly">Even spacing everywhere</div>

Responsive Justify Content​

Responsive Horizontal Alignment
<div class="nvs-row nvs-jc-start nvs-jc-md-center nvs-jc-lg-end">
  <!-- Mobile: left, Tablet: center, Desktop: right -->
</div>

Align Items (Vertical Alignment)​

Vertical Alignment Examples
<div class="nvs-row nvs-ai-start">Align Top</div>
<div class="nvs-row nvs-ai-center">Center</div>
<div class="nvs-row nvs-ai-end">Align Bottom</div>
<div class="nvs-row nvs-ai-baseline">Align Baseline</div>
<div class="nvs-row nvs-ai-stretch">Stretch</div>

Responsive Align Items​

Responsive Dikey Hizalama
<div class="nvs-row nvs-ai-start nvs-ai-md-center nvs-ai-lg-end">
  <!-- Mobile: top, Tablet: middle, Desktop: bottom -->
</div>
Alignment Tip

For vertical alignment, make sure the parent container has sufficient height.