Bootstrap Flex Yardımcıları: d-flex, justify-content ve align-items

Flex kapsayıcısı açmak: d-flex ve d-inline-flex

.d-flex öğeye display: flex !important, .d-inline-flex ise display: inline-flex !important verir. İkincisi kapsayıcının kendisini satır içi bir kutu yapar; içi yine flex düzenindedir. Her ikisinin de kademeli sürümleri vardır (.d-sm-flex, .d-md-inline-flex ve diğerleri). Bu sınıflar display yardımcılarının bir parçasıdır; ekrana göre açıp kapatma mantığı Bootstrap display yardımcıları yazısında anlatılıyor.

Belgeler bir noktayı özellikle vurgular: flex davranışı yalnızca doğrudan çocuklara uygulanır. Torunlar normal akışta kalır. Bir kartın içindeki butonları hizalamak istiyorsanız .d-flex sınıfını butonların hemen üstündeki öğeye vermelisiniz, kartın en dış kutusuna değil.

<div class="d-flex p-2 border">Ben bir flex kapsayıcısıyım</div>
<div class="d-inline-flex p-2 border">Ben satır içi bir flex kapsayıcısıyım</div>

Yön: flex-row ve flex-column

Yön sınıfları flex öğelerinin hangi eksende dizileceğini belirler. Tarayıcının varsayılanı row olduğu için .flex-row çoğu zaman yazılmaz; belgelere göre ona ihtiyaç duyduğunuz yer duyarlı düzenlerdir. .flex-row-reverse yatay diziyi ters taraftan başlatır, .flex-column öğeleri dikey dizer, .flex-column-reverse dikey diziyi alttan başlatır.

En sık kullanılan duyarlı kalıp, telefonda alt alta, geniş ekranda yan yana dizilen bir öğe grubudur:

<div class="d-flex flex-column flex-md-row gap-3">
  <div class="p-2 border">Adım 1</div>
  <div class="p-2 border">Adım 2</div>
  <div class="p-2 border">Adım 3</div>
</div>

md altında .flex-column geçerlidir ve adımlar alt alta durur; md ve üstünde .flex-md-row yönü yataya çevirir. .gap-3 her iki durumda da öğeler arasına 1rem boşluk koyar (gap için bkz. Bootstrap spacing ve gap). Yön değiştiğinde ana eksen de değişir; bu, aşağıdaki hizalama sınıflarının davranışını doğrudan etkiler.

Ana eksende dağılım: justify-content

.justify-content-* sınıfları flex öğelerini ana eksende hizalar. Belgelere göre ana eksen başlangıçta x eksenidir, flex-direction: column kullanıldığında y eksenine döner. Altı seçenek vardır ve kaynak kodda şu CSS değerlerine eşlenir:

Resmî Bootstrap 5.0 örnek şablonu: Blog şablonundaki kategori menüsü bunun tipik bir örneğidir: bağlantılar .d-flex .justify-content-between taşıyan bir nav içinde satır boyunca eşit aralıklarla dağılır. Duyarlı sürümlerle bir başlık çubuğunu telefonda ortalayıp geniş ekranda iki uca yaslayabilirsiniz: .justify-content-center .justify-content-md-between.

Çapraz eksende hiza: align-items ve align-self

.align-items-* sınıfları kapsayıcıya verilir ve bütün öğeleri çapraz eksende hizalar; çapraz eksen başlangıçta y eksenidir, sütun yönünde x eksenine döner. Seçenekler start, end, center, baseline ve tarayıcı varsayılanı olan stretch'tir. .align-self-* aynı seçenekleri tek bir öğeye uygular; 5.0.2 kaynak kodu bunlara ek olarak öğenin hizasını kapsayıcının ayarına geri bırakan .align-self-auto sınıfını da üretir.

<div class="d-flex align-items-center border" style="height: 100px;">
  <div class="p-2">Ortada</div>
  <div class="p-2 align-self-start">Üstte</div>
  <div class="p-2">Ortada</div>
</div>

Çapraz eksende hizalamanın görünmesi için kapsayıcının öğelerden daha uzun olması gerekir; belgelerdeki örnekler bu yüzden kapsayıcılara height: 100px verir. Varsayılan stretch değeri öğeleri kapsayıcının yüksekliğine uzatır; yan yana duran kartların aynı boyda görünmesinin sebebi budur. baseline ise farklı yazı boyutlarındaki öğeleri metin taban çizgisine göre hizalar.

Boyut paylaşımı: flex-fill, flex-grow ve flex-shrink

.flex-fill derlenmiş CSS'te flex: 1 1 auto !important; olarak tanımlıdır. Belgelere göre bir grup kardeş öğeye verildiğinde öğeleri içerik genişliklerine göre (içerik kutuyu aşmıyorsa eşit genişlikte) büyütür ve kullanılabilir yatay alanın tamamını doldurur. Uzun metinli bir öğe daha geniş, kısa metinli öğeler daha dar olur ama hep birlikte satırı doldururlar.

.flex-grow-1 bir öğenin kalan alanı doldurmasını sağlar, .flex-grow-0 bu yeteneği kapatır. .flex-shrink-1 öğenin gerektiğinde küçülmesine izin verir, .flex-shrink-0 küçülmesini engeller. Belgelerdeki shrink örneğinde ilk öğe .w-100 ile tüm genişliği ister, .flex-shrink-1 taşıyan ikinci öğe de içeriğini alt satıra kırarak ona yer açar. Arama kutusu ve buton gibi bir çift için tipik kullanım şöyledir:

<form class="d-flex">
  <input class="form-control flex-grow-1 me-2" type="search" placeholder="Ara" aria-label="Ara">
  <button class="btn btn-outline-success flex-shrink-0" type="submit">Ara</button>
</form>

Bu kalıp resmî navbar örneklerindeki arama formuna dayanır (orada form yalnızca .d-flex taşır, input ise .me-2). Burada input kalan alanı doldurur, buton ise hiçbir zaman sıkışmaz. Form kontrollerinin stilleri Bootstrap form-control yazısında.

Otomatik margin ile itmek

Flex düzeninde auto margin, kalan boşluğun tamamını kendi tarafına alır. Belgeler bunu üç örnekle gösterir: hiç auto margin yokken öğeler başa toplanır; ilk öğeye .me-auto verince diğer iki öğe sağa itilir; son öğeye .ms-auto verince o öğe tek başına sağa gider. Bir navbar'da logoyu solda, kullanıcı menüsünü sağda tutmanın en kısa yolu budur.

<div class="d-flex border mb-3">
  <div class="p-2 me-auto">Logo</div>
  <div class="p-2">Yardım</div>
  <div class="p-2">Giriş</div>
</div>

Aynı fikir dikey yönde de çalışır. Belgelere göre align-items, flex-direction: column ve margin-top: auto ya da margin-bottom: auto birleştirildiğinde bir öğe kapsayıcının en üstüne ya da en altına taşınabilir. Örneğin yükseklikleri eşitlenmiş kartlarda butonu kartın dibine indirmek için kart gövdesini .d-flex .flex-column yapıp butona .mt-auto verebilirsiniz.

<div class="row row-cols-1 row-cols-md-2 g-3">
  <div class="col">
    <div class="card h-100">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Kısa açıklama</h5>
        <p class="card-text">Tek satır.</p>
        <a class="btn btn-primary mt-auto align-self-start" href="#">İncele</a>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Uzun açıklama</h5>
        <p class="card-text">Birkaç satır süren daha uzun bir metin burada yer alır ve kartı uzatır.</p>
        <a class="btn btn-primary mt-auto align-self-start" href="#">İncele</a>
      </div>
    </div>
  </div>
</div>

.h-100 iki kartı da sütun yüksekliğine uzatır; sütunlar satırda varsayılan stretch hizasıyla aynı boya geldiği için kartlar da eşitlenir. Kart gövdesi dikey bir flex kapsayıcısı olduğundan butondaki .mt-auto kalan boşluğu üstüne alır ve butonu dibe indirir. .align-self-start ise sütun yönünde varsayılan stretch yüzünden butonun tam genişliğe yayılmasını engeller. Kart bileşeninin kendisi Bootstrap card yazısında.

Resmî şablondan: sayfa altına yapışan footer

Bu tekniğin en bilinen kullanımı Bootstrap 5.0 örnek şablonu: Sticky footer navbar şablonudur. Şablonda html öğesi .h-100, body öğesi .d-flex .flex-column .h-100 sınıflarını alır; main .flex-shrink-0, footer ise .mt-auto taşır. İçerik kısa olsa bile footer'ın üstündeki auto margin boşluğu doldurur ve footer ekranın altına oturur; içerik uzunsa footer doğal olarak içeriğin arkasından gelir.

<body class="d-flex flex-column h-100">
  <main class="flex-shrink-0">
    <div class="container">Sayfa içeriği</div>
  </main>
  <footer class="mt-auto py-3 bg-light">
    <div class="container">Alt bilgi</div>
  </footer>
</body>

Satır sarma: flex-wrap

Tarayıcı varsayılanı olarak flex öğeleri tek satırda kalır ve gerekirse sıkışır; bunu açıkça belirtmek için .flex-nowrap vardır. .flex-wrap sığmayan öğeleri alt satıra geçirir, .flex-wrap-reverse sarmayı ters yönde yapar. Etiket listeleri ve rozet grupları gibi sayısı belli olmayan öğeler için .d-flex .flex-wrap .gap-2 kullanışlı bir üçlüdür. Kademeli sürümleri de vardır: .flex-md-nowrap gibi. Resmî Bootstrap 5.0 örnek şablonu: Dashboard şablonundaki üst çubukta da .flex-md-nowrap kullanılır.

Görsel sıra: order

.order-* sınıfları flex öğelerinin görsel sırasını değiştirir. Belgeler yalnızca bir öğeyi başa ya da sona almak ve DOM sırasına dönmek için seçenek sunduklarını belirtir; değerler 0 ile 5 arasındadır, .order-first order: -1, .order-last ise order: 6 uygular. Daha fazla değer için kendi CSS'inizi eklemeniz gerekir. Bu sınıflar grid sütunlarında da aynı şekilde çalışır; sütun örnekleri sütun hizalama yazısında.

Çok satırlı hiza: align-content

.align-content-* sınıfları birden fazla satıra sarılmış flex öğelerini çapraz eksende satırlar halinde birlikte hizalar. Seçenekler start (tarayıcı varsayılanı), end, center, between, around ve stretch'tir. Belgelerin uyarısı açıktır: bu özelliğin tek satırlık flex öğeleri üzerinde hiçbir etkisi yoktur. Belgelerdeki örnekler bu yüzden .flex-wrap ekler, öğe sayısını artırır ve kapsayıcıya height: 200px verir.

<div class="d-flex flex-wrap align-content-center border" style="height: 200px;">
  <div class="p-2">Etiket</div>
  <div class="p-2">Etiket</div>
  <div class="p-2">Etiket</div>
  <div class="p-2">Etiket</div>
</div>

Media object tarifi

Geçiş rehberine göre Bootstrap 5, Bootstrap 4'teki .media bileşenini yardımcı sınıflarla kolayca yeniden kurulabildiği için kaldırdı. Flex sayfası bunun tarifini verir: görsel .flex-shrink-0 taşıyan bir kutuda, metin .flex-grow-1 .ms-3 taşıyan bir kutuda durur. Görselin yanındaki metni dikeyde ortalamak için kapsayıcıya .align-items-center eklenir.

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="avatar.png" width="64" height="64" alt="Kullanıcı görseli">
  </div>
  <div class="flex-grow-1 ms-3">
    Yorum metni görselin yanında akar ve kalan genişliği doldurur.
  </div>
</div>

.flex-shrink-0 dar ekranlarda görselin sıkışmasını engeller, .flex-grow-1 metin kutusunun kalan alanı almasını sağlar. Bu tarif yorum listeleri, bildirim satırları ve profil kartları için temel bir yapı taşıdır.

Sass tarafı ve dosya seçimi

Flex yardımcıları _utilities.scss dosyasında utilities API ile tanımlıdır. Örneğin justify-content girdisi responsive: true taşır ve start: flex-start, between: space-between gibi kısa adları CSS değerlerine eşler. Yeni bir değer eklemek ya da bir sınıfı kaldırmak için Utilities API yazısına bakın. Belgelerdeki dosya tablosuna göre yalnızca grid sistemini içeren bootstrap-grid.css dosyası flex yardımcılarını da içerir; bileşenlere ihtiyacınız yoksa bu dosya yeterli olabilir (dosya seçimi için Bootstrap kurulum).

Sık yapılan hatalar

• Sınıfı yanlış seviyeye vermek: justify-content, align-items, wrap ve align-content kapsayıcıya; align-self, order, grow, shrink ve fill öğeye verilir. Kapsayıcıda .d-flex yoksa öğe sınıflarının hiçbiri çalışmaz.
• Sütun yönünde eksenleri unutmak: .flex-column verdikten sonra yatayda ortalamak için .justify-content-center değil .align-items-center gerekir, çünkü eksenler yer değiştirmiştir.
• Tek satırda align-content denemek: Etki görmek için öğelerin sarılması (.flex-wrap) ve kapsayıcıda fazladan yükseklik olması gerekir.
• Duyarlı display ile flex'i kaybetmek: .d-flex .d-md-block md ve üstünde flex düzenini kapatır. Gizleyip geri getirirken .d-none .d-md-flex kullanın.
• Var olmayan sınıflar: .order-6 ya da .flex-grow-2 5.0.2 CSS dosyasında yoktur; grow ve shrink yalnızca 0 ve 1 değerlerini alır.
• Satırın içinde d-flex kullanmak: .row zaten bir flex kapsayıcısıdır; satıra ayrıca .d-flex vermek gereksizdir. Satır içindeki sütunları hizalamak için doğrudan satıra hizalama sınıflarını ekleyin.

Sık Sorulan Sorular

Bir öğeyi hem yatayda hem dikeyde nasıl ortalarım?

Kapsayıcıya .d-flex .justify-content-center .align-items-center verin ve bir yükseklik tanımlayın. Örneğin tam ekran bir giriş alanı için .min-vh-100 yardımcısı kullanılabilir; boyut sınıfları Bootstrap boyut sınıfları yazısında.

Flex yardımcıları ile grid sistemi arasında nasıl seçim yaparım?

Sayfanın ana sütun düzeni ve ekran boyutuna göre değişen genişlikler için grid sistemi daha uygundur. Bir bileşenin içindeki küçük hizalamalar (buton grupları, ikon ile metin, başlık çubuğu) için flex yardımcıları daha az kod gerektirir. İkisi de flexbox kullandığı için birlikte rahatça çalışır.

flex-fill ile flex-grow-1 arasındaki fark nedir?

.flex-fill flex: 1 1 auto kısayolunu kullanır ve büyüme, küçülme ve temel boyutu birlikte ayarlar. .flex-grow-1 yalnızca flex-grow: 1 verir. Tek bir öğenin kalan alanı almasını istiyorsanız .flex-grow-1, bir grup öğenin satırı birlikte doldurmasını istiyorsanız .flex-fill daha anlaşılırdır.

Bootstrap 4'teki media sınıfı nereye gitti?

Bootstrap 5'te kaldırıldı; yukarıdaki flex tarifi aynı düzeni kurar. Diğer kaldırılan bileşenler için Bootstrap 4'ten 5'e geçiş yazısına bakın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · CSS flexbox rehberi · Bootstrap grid sistemi · Sütun hizalama ve order · Spacing ve gap · Display yardımcıları