Ana içeriğe geç

Flexbox Araçları

Flexbox Utilities​

Justify Content (Yatay Hizalama)​

Yatay Hizalama Örnekleri
<div class="nvs-row nvs-jc-start">Sola hizala</div>
<div class="nvs-row nvs-jc-center">Ortala</div>
<div class="nvs-row nvs-jc-end">Sağa hizala</div>
<div class="nvs-row nvs-jc-between">Aralarında eşit boşluk</div>
<div class="nvs-row nvs-jc-around">Çevrelerinde eşit boşluk</div>
<div class="nvs-row nvs-jc-evenly">Her yerde eşit boşluk</div>

Responsive Justify Content​

Responsive Yatay Hizalama
<div class="nvs-row nvs-jc-start nvs-jc-md-center nvs-jc-lg-end">
  <!-- Mobile: sola, Tablet: ortala, Desktop: sağa -->
</div>

Align Items (Dikey Hizalama)​

Dikey Hizalama Örnekleri
<div class="nvs-row nvs-ai-start">Üste hizala</div>
<div class="nvs-row nvs-ai-center">Ortala</div>
<div class="nvs-row nvs-ai-end">Alta hizala</div>
<div class="nvs-row nvs-ai-baseline">Baseline hizala</div>
<div class="nvs-row nvs-ai-stretch">Gerdir</div>

Responsive Align Items​

Responsive Dikey Hizalama
<div class="nvs-row nvs-ai-start nvs-ai-md-center nvs-ai-lg-end">
  <!-- Mobile: üst, Tablet: orta, Desktop: alt -->
</div>
Hizalama İpucu

Dikey hizalama için parent container'ın yeterli yüksekliğe sahip olması gerekir.