Hizalama

Esnek kutu ızgara sistemimiz sayesinde bir dizi hizalama seçeneğiyle sütunları nasıl değiştireceğinizi öğrenin.

Öncesinde Izgara Sistemleri'ni okuduğunuzdan emin olun.

Sütunları dikey ve yatay olarak hizalamak için esnek kutu için hazırlanan hizalama yardımcı classlarını kullanın.

Dikey Hizalama#

(varsayılan) Öğeleri başlangıç noktasında (sola dayalı) hizalama.

Dikey Hizalama - Başlangıç

<div class="d-flex align-items-flex-start">
  ...
</div>

Öğeleri ortada hizalama.

Dikey Hizalama - Orta

<div class="d-flex align-items-center">
  ...
</div>

Öğeleri bitiş noktasında (sağa dayalı) hizalama.

Dikey Hizalama - Son

<div class="d-flex align-items-flex-end">
  ...
</div>

Yatay Hizalama - Başlangıç

<div class="d-flex justify-content-flex-start">
  ...
</div>

Yatay Hizalama - Orta

<div class="d-flex justify-content-center">
  ...
</div>

Yatay Hizalama - Son

<div class="d-flex justify-content-flex-end">
  ...
</div>

Tüm öğelerin arası aynı eşitlikte olacak şekilde hizalama.

Yatay Hizalama

<div class="d-flex justify-content-evenly">
  ...
</div>

İlk ve son öğe hariç diğerlerinin arası eşit olacak şekilde hizalama.

Yatay Hizalama

<div class="d-flex justify-content-around">
  ...
</div>

İlk öğe sola dayalı, son öğe sağa dayalı ve diğerleri ortalı olacak şekilde hizalama.

Yatay Hizalama

<div class="d-flex justify-content-between">
  ...
</div>