Flexbox Hizalama: justify-content, align-items, align-content ve gap

Hangi özellik hangi eksende çalışır?

MDN'in kutu hizalama rehberi flexbox için şu basit eşlemeyi verir: ana eksen, flex-direction ile belirlenen yöndür ve justify-content ile hizalanır. Çapraz eksen ana eksene diktir ve align-items, align-self ile align-content tarafından kontrol edilir. Bu özellikler aslında yalnızca flexbox'a ait değildir; ortak tanımları CSS kutu hizalama (box alignment) modülündedir ve bir özellik iki belirtimde de tanımlıysa kutu hizalama modülü geçerlidir.

justify-content: ana eksende boş alanı dağıtmak

justify-content, öğeler yerleştirildikten sonra satırda kalan pozitif boş alanın ne olacağını belirler. Başlangıç değeri normaldır; MDN'e göre flex kapsayıcıda normal, stretch gibi, stretch de start gibi davrandığı için sonuçta öğeler başlangıç kenarında toplanır ve kalan alan son öğeden sonra kalır.

Bu değerlerin farkını sayılarla görmek kolaylaştırır. 600 piksellik bir kapsayıcıda üç öğe toplam 300 piksel yer kaplıyorsa 300 piksel boş alan vardır. space-between bu alanı iki ara boşluğa böler: her ara 150 piksel olur, uçlarda boşluk kalmaz. space-evenly alanı dört eşit parçaya böler (iki ara, iki uç): her boşluk 75 piksel olur. space-around ise her öğenin iki yanına eşit pay verir; 300 piksel üç öğeye 100'er piksel olarak dağılır, her öğenin her yanında 50 piksel kalır. Böylece uçlarda 50, aralarda 50 + 50 = 100 piksel boşluk görünür; uçtaki boşluk aranın yarısıdır.

.menu {
  display: flex;
  justify-content: space-between;
}
/* sonuç: ilk bağlantı en başta, son bağlantı en sonda,
   aradaki boşluklar eşit */

justify-content neden bazen hiçbir şey yapmaz?

MDN bu konuda net bir açıklama yapar: hizalama, uzunluklar ve otomatik margin'ler uygulandıktan sonra yapılır. Bir satırdaki öğelerden en az birinin flex-grow değeri 0'dan büyükse o öğe boş alanın tamamını kendisi alır; dağıtılacak alan kalmadığı için justify-content etkisiz görünür. Bu yüzden öğelere flex: 1 verip ardından justify-content: center beklemek sonuç vermez. Büyüme ve küçülme davranışı flex-grow, flex-shrink ve flex-basis yazısında ayrıntılı anlatılıyor. Aynı nedenle justify-content satırların arasındaki boşluğu değil, yalnızca bir satırın içindeki öğeler arasındaki boşluğu etkiler.

flex-start ile start aynı şey mi?

Normal yönde aynı sonucu verirler, ama ters yönde ayrılırlar. MDN'in hizalama rehberine göre flex-start ve flex-end flex-direction'a bağlıdır: row-reverse kullandığınızda flex-start satırın bitiş tarafına geçer. start ve end ise flex-direction değişikliklerinden etkilenmez; yazma yönünün başlangıç ve bitişini izler. left ve right değerleri fiziksel kenarları ifade eder; ana eksen satır içi eksene paralel değilse, örneğin flex-direction: column verildiğinde, start gibi davranır.

align-items: çapraz eksende hizalama

align-items tüm flex öğelerini kendi satırı içinde çapraz eksen boyunca hizalar. Varsayılan normal değeri flex öğelerinde stretch gibi davranır; bu yüzden öğeler satırın yüksekliğine uzar. Bu yükseklik ya en uzun öğeden ya da kapsayıcıya verilen yükseklikten gelir.

• stretch: Öğenin çapraz boyutu auto ise kapsayıcıyı dolduracak kadar uzatılır; min ve max sınırlarına uyulur. Öğeye sabit bir yükseklik verdiyseniz uzamaz ve flex-start gibi davranır.
• start, flex-start, end, flex-end: Öğeleri çapraz eksenin başına ya da sonuna yaslar.
• center: Öğenin margin kutusunu satırın ortasına koyar. Öğe kapsayıcıdan büyükse her iki yöne eşit taşar.
• baseline, first baseline, last baseline: Öğeleri metin taban çizgilerine göre hizalar; farklı yazı boyutlarındaki etiketlerin aynı çizgide oturması için kullanışlıdır.

.satir {
  display: flex;
  height: 130px;
  align-items: center;   /* çapraz eksen (dikey) ortası */
}
/* sonuç: öğeler satırın dikey ortasında durur ve
   artık 130px yüksekliğe uzamaz, içerikleri kadar yüksek olur */

Yönü column yaptığınızda çapraz eksen yatay olur ve align-items öğeleri sola, sağa ya da yatay ortaya hizalamaya başlar. Ayrıca sütun yönünde varsayılan stretch öğeleri kapsayıcının genişliği boyunca uzatır; bir butonun bütün genişliği kaplamasını istemiyorsanız align-items: start ya da öğeye align-self vermeniz gerekir.

align-self: tek bir öğeyi ayırmak

align-items aslında tüm öğelerin align-self değerini toplu olarak ayarlar. Bu yüzden tek bir öğenin hizasını değiştirmek için o öğeye align-self yazarsınız. Özellik align-items'ın tüm değerlerini kabul eder; ek olarak gelen auto değeri ebeveynin align-items değerini kullanır.

.kapsayici {
  display: flex;
  align-items: flex-start;
}
.kapsayici > :first-child {
  align-self: stretch;    /* yalnızca ilk öğe satır boyunca uzar */
}
.kapsayici > .secili {
  align-self: center;     /* seçili öğe dikey ortada */
}

Ana eksende justify-self diye bir şey yoktur. MDN'in açıklamasına göre flexbox ana eksende öğeleri bir grup olarak ele alır: önce öğelerin toplam boyutu hesaplanır, kalan alan da justify-content ile grup olarak dağıtılır. Tek bir öğeyi ana eksende taşımak bütün grubu etkileyeceği için böyle bir özellik anlamlı değildir; çapraz eksende ise her öğenin kendi satırında boşluğu olabileceğinden align-self anlamlıdır.

Otomatik margin ile bölünmüş gezinme çubuğu

Ana eksende bir öğeyi ya da bir öğe grubunu diğerlerinden ayırmanın yolu auto değerli margin'dir. auto margin bulunduğu eksende alabileceği tüm boş alanı emer. Bir bloğu margin: 0 auto ile ortalamak da aynı mantığa dayanır: iki yan da alanı almaya çalıştığı için blok ortaya itilir.

.gezinme {
  display: flex;
  gap: 20px;
}
.gezinme .giris {
  margin-left: auto;     /* kalan tüm boşluğu soluna alır */
}
/* sonuç: ilk bağlantılar başta toplanır, .giris ve ondan sonraki
   öğeler sağ kenara itilir */

Bu teknik justify-content ile birlikte de çalışır, ama hizalama otomatik margin'lerden sonra yapıldığı için auto margin boş alanı önce alır. MDN'in kutu hizalama rehberi bir ayrıntıyı daha belirtir: otomatik margin için alan kalmadığında öğe diğer flex öğeleri gibi davranır ve sığmak için küçülür.

align-content: satırları dağıtmak

align-content, flex-wrap ile birden fazla satıra kayan bir kapsayıcıda satırların çapraz eksende nasıl paketleneceğini belirler. MDN'e göre bu özelliğin bir etkisi olması için kapsayıcının çapraz eksendeki boyutunun, örneğin yüksekliğinin, öğeleri göstermek için gerekenden büyük olması gerekir. Tek satırlı, kaydırma yapmayan bir kapsayıcıda temel kavramlar rehberi align-content'in etkisi olmadığını belirtir.

.galeri {
  display: flex;
  flex-wrap: wrap;
  height: 400px;                 /* satırlara gereğinden fazla alan */
  align-content: space-between;  /* ilk satır üste, son satır alta yaslanır */
}

Değerleri justify-content'e benzer: start, end, center, space-between, space-around, space-evenly ve stretch. normal değeri flex'te stretch gibi davranır, yani satırlar boş alanı paylaşarak uzar. justify-content'ten farklı olarak align-content taban çizgisi (baseline) değerlerini de kabul eder.

gap: öğeler arasına sabit aralık

Flex öğeleri arasına boşluk koymanın en temiz yolu kapsayıcıya gap vermektir. gap, row-gap ve column-gap özelliklerinin kısaltmasıdır. Tek değer verirseniz iki yöne de uygulanır; iki değer verirseniz ilki row-gap, ikincisi column-gap olur. Başlangıç değeri normaldır ve flex kapsayıcıda 0 anlamına gelir.

Flexbox'ta hangi değerin neyi etkilediği yöne bağlıdır. flex-direction satır üretiyorsa (row, row-reverse) ilk değer satırlar arasındaki, ikinci değer bir satırdaki öğeler arasındaki boşluğu belirler. Sütun yönünde (column, column-reverse) ise ilk değer bir sütundaki öğeler arasındaki, ikinci değer sütunlar arasındaki boşluğu belirler. Satırlar arası boşluk ancak flex-wrap: wrap ile birden fazla satır oluştuğunda görünür.

.kartlar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;   /* satırlar arası 1rem, öğeler arası 2rem */
}

gap'in margin'den farkı, boşluğun yalnızca öğelerin arasında oluşmasıdır; kapsayıcının kenarlarına boşluk eklemez, son öğeden sonra fazladan boşluk bırakmaz. Ancak MDN, gerçek görünen aralığın gap değerinden büyük olabileceğini hatırlatır: margin, padding, justify-content ve align-content da aralığı büyütebilir.

place-content ve place-items kısaltmaları

place-content, align-content ve justify-content değerlerini tek bildirimde yazar; ilk değer align-content, ikinci değer justify-content içindir. İkinci değer yazılmazsa ilk değer, ikisi için de geçerliyse, iki özelliğe de uygulanır; birinde geçersizse bütün değer geçersiz olur. place-items ise align-items ile justify-items'ın kısaltmasıdır; flex kapsayıcıda justify-items yok sayıldığı için yalnızca çapraz eksen hizası uygulanır.

Taşma güvenliği: safe ve unsafe

Konumsal hizalama değerlerinin önüne safe ya da unsafe yazabilirsiniz. safe center kullanıldığında, öğe kapsayıcıdan taşıyorsa ortalanmaz; MDN'e göre start gibi hizalanır. Bunun nedeni, ortalanmış ve taşan bir öğenin başlangıç tarafının erişilemez alana düşerek kaybolabilmesidir. unsafe ise taşma olsa bile istenen hizayı uygular. Taşma ve kaydırma davranışının kendisi overflow yazısında ele alınıyor.

.dar-kutu {
  display: flex;
  flex-direction: column;
  height: 120px;
  justify-content: safe center;  /* sığarsa ortala, sığmazsa başlangıçtan diz */
}

Yazma yönü ve hizalama

start ve end değerleri yazma yönüne duyarlıdır. Soldan sağa bir dilde justify-content: start öğeleri sola, sağdan sola bir dilde (örneğin direction: rtl verilmiş bir bölümde) sağa toplar. Çok dilli sitelerde left ve right yerine start ve end kullanmak, düzenin her dilde doğru yöne akmasını sağlar.

Sık yapılan hatalar

• Öğelerde flex-grow varken justify-content beklemek: Büyüyen öğe boş alanı tükettiği için dağıtılacak alan kalmaz.
• Tek satırda align-content denemek: Satırları dağıtan bu özellik kaydırma yapan ve çapraz eksende fazladan alanı olan kapsayıcılarda anlamlıdır; tek satırdaki öğeleri hizalamak için align-items kullanın.
• Sabit yükseklikli öğede stretch beklemek: stretch yalnızca çapraz boyutu auto olan öğeleri uzatır.
• Kapsayıcıya yükseklik vermeden dikey ortalamak: Kapsayıcı içeriği kadar yüksekse çapraz eksende hizalanacak boş alan yoktur. Ortalama yöntemlerinin karşılaştırması CSS ortalama yöntemleri yazısında.
• justify-self ya da justify-items kullanmak: Flexbox bunları yok sayar; ana eksende tek öğe için auto margin kullanın.
• Ters yönde flex-start ile start'ı karıştırmak: row-reverse ile flex-start bitiş tarafına geçer, start geçmez.

Sık Sorulan Sorular

Bir öğeyi flexbox ile hem yatay hem dikey nasıl ortalarım?

Kapsayıcıya display: flex, justify-content: center ve align-items: center yazın ve kapsayıcının çapraz eksende boş alanı olduğundan, örneğin bir yüksekliği olduğundan emin olun. Grid ve margin: auto gibi alternatifler için ortalama yöntemleri yazısına bakabilirsiniz.

space-around ile space-evenly arasındaki fark nedir?

space-evenly uçlar dahil tüm boşlukları eşit yapar. space-around her öğenin iki yanına eşit pay verdiği için uçlardaki boşluk, öğeler arasındaki boşluğun yarısı kadar olur.

gap mi margin mi kullanmalıyım?

Öğeler arasında eşit ve sabit aralık istiyorsanız gap daha basittir: boşluk yalnızca öğelerin arasına girer ve kenarlarda fazlalık oluşturmaz. Tek bir öğeyi diğerlerinden itmek gibi esnek boşluklar için auto margin kullanılır.

align-items: baseline ne zaman işe yarar?

Öğelerdeki metinler farklı yazı boyutlarındaysa, örneğin büyük bir fiyat ile küçük bir birim etiketi yan yanaysa, baseline metinlerin taban çizgilerini aynı hizaya getirir; center ise kutuları ortaladığı için yazılar farklı çizgilerde görünebilir.

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: CSS öğrenme rehberi · CSS flexbox rehberi · flex-grow, flex-shrink, flex-basis · CSS ortalama yöntemleri · CSS grid rehberi