Flex Öğelerini Hizalama

Flexbox’ın web geliştiricilerinin ilgisini hızla çekmesinin nedenlerinden biri de, web’e ilk kez uygun hizalama özellikleri getirmesidir. Örneğin, düzgün dikey hizalamayı mümkün kıldı, böylece sonunda bir kutuyu kolayca ortalayabiliyoruz. Bu kılavuzda, Flexbox’ta hizalama ve yaslama özelliklerinin nasıl çalıştığına kapsamlı bir şekilde bakacağız.

Kutumuzu ortalamak için align-items özelliğini kullanarak öğemizi cross axis (bu durumda dikey olarak ilerleyen blok ekseni) üzerinde hizalarız. Öğeyi ana eksen üzerinde hizalamak için justify-content özelliğini kullanırız; bu durumda yatay olarak çalışan satır içi eksen söz konusudur.

Bu örneğin koduna aşağıdan göz atabilirsiniz. Kapsayıcının veya iç içe geçmiş öğenin boyutunu değitirdiğinizde bile iç içe geçmiş öğe her zaman ortalanmış olarak kalır.

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}

<div class="box">
  <div></div>
</div>

Hizalamayı kontrol eden özellikler

Bu kılavuzda inceleyeceğimiz özellikler aşağıdaki gibidir.

• justify-content —ana eksen üzerindeki tüm öğelerin hizalanmasını kontrol eder.
• align-items — cross eksenindeki tüm öğelerin hizalanmasını kontrol eder.
• align-self — tek bir flex öğesinin cross eksende hizalanmasını kontrol eder.
• align-content — teknik özelliklerde “flex satırlarını paketlemek” için tanımlanmıştır; cross eksendeki flex satırları arasındaki boşluğu kontrol eder
• gap, column-gap, ve row-gap — Flex öğeleri arasında boşluklar veya oluklar oluşturmak için kullanılır.

Ayrıca flexbox’ta hizalama için otomatik kenar boşluklarının nasıl kullanılabileceğini de keşfedeceğiz.

Cross Ekseni

align-items ve align-self özellikleri flex öğelerimizin cross ekseninde düzenler. flex-direction:row ise sütun boyunca yukarıdan aşağıya ve flex-direction:column ise satır boyunca hizalanmasını kontrol eder.

En basit flex örneğinde cross eksen hizalamasından yararlanıyoruz. Bir konteynere display: flex eklersek, alt öğelerin tümü bir sıra halinde düzenlenmiş flex öğeleri haline gelir. Bu öğe cross eksendeki öğelerin yüksekliğini tanımladığından, hepsi en uzun öğe kadar uzayacaklardır. Eğer flex konteyneriniz bir yükseklik ayarına sahipse, öğelerde ne kadar içerik olduğuna bakılmaksızın öğeler bu yüksekliğe kadar esneyecektir.

Öğelerin aynı yükseklikte olmasının nedeni, cross eksende hizalamayı kontrol eden özellik olan align-items‘in başlangıç değerinin stretch olarak ayarlanmış olmasıdır.

Öğelerin nasıl hizalanacağını kontrol etmek için başka değerler kullanabiliriz:

• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-items: stretch
• align-items: baseline

Aşağıdaki örnekte align-items değeri stretch‘tir. Diğer değerleri deneyin ve tüm öğelerin flex konteynerinde birbirlerine karşı nasıl hizalandığını görün.

.box {
  display: flex;
  align-items: stretch;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three
    <br>has
    <br>extra
    <br>text
  </div>
</div>

Bir öğeyi align-self ile hizalama

Aslında align-items özelliği, bir grup olarak tüm flex öğeler üzerinde align-self özelliğini ayarlar. Bu da, tek bir öğeyi hedeflemek için align-self özelliğini kullanabileceğimiz anlamına gelir. align-self özelliği, align-items ile aynı değerlerin tümünü alabilir. Ya da değeri flex konteynerinde tanımlanan değere sıfırlamak istersek auto değerini kabul eder.

Bir sonraki örnekte, flex konteyneri align-items: flex-start özelliğine sahip; bu da tüm öğelerin cross ekseninin başlangıcına hizalandığı anlamına gelir. first-child seçicisini kullanarak ilk öğeyi hedefleyelim ve bu öğeyi align-self: stretch olarak ayarlayalım. Başka bir öğeyi de .selected sınıfını kullanılarak seçelim ve align-self: center verelim. Sonuç aşağıdaki gibi olacak. Bunun nasıl çalıştığını görmek için align-items değerini değiştirebilir veya tek tek öğelerdeki align-self değerlerini değiştirebilirsiniz.

.box {
  display: flex;
  align-items: flex-start;
  height: 200px;
}
.box>*:first-child {
    align-self: stretch;
}
.box .selected {
    align-self: center;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div class="selected">Three</div>
  <div>Four</div>
</div>

Ana ekseni değiştirme

Şimdiye kadar fleks yönümüz satır olduğunda ve yukarıdan aşağıya yazılan bir dilde çalışırken davranışa baktık. Bu, ana eksenin satır boyunca yatay olarak ilerlediği ve cross eksenin yukarı ve aşağı hareket ettiği anlamına gelir.

Eğer flex-direction‘ımızı column olarak değiştirirsek, align-items ve align-self artık öğeleri sola ve sağa hizalayacaktır.

Bunu, önceki örnekle tamamen aynı olan aşağıdaki örnekte deneyebilirsiniz. Buradaki değişiklik sadece flex-direction: column:

.box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 200px;
}
.box>*:first-child {
    align-self: stretch;
}
.box .selected {
    align-self: center;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div class="selected">Three</div>
  <div>Four</div>
</div>

İçeriği cross eksende hizalama – align-content özelliği

Şimdiye kadar öğeleri veya tek bir öğeyi flex-container tarafından tanımlanan alanın içine hizalıyorduk. Çok satırlı bir flex konteyneriniz varsa, satırlar arasındaki boşluk dağılımını kontrol etmek için align-content özelliğini de kullanmak isteyebilirsiniz. Spesifikasyonda bu, flex satırlarının paketlenmesi olarak tanımlanmaktadır.

align-content‘in çalışması için flex konteynerinizde öğeleri görüntülemek için gerekenden daha fazla yüksekliğe ihtiyacınız vardır. Bu durumda, align-content, tüm öğeler üzerinde bir set olarak çalışır ve bu boş alana ne olacağını ve içindeki tüm öğe setinin hizalanmasını belirler.

align-content özelliği aşağıdaki değerleri alır:

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch
• align-content: space-evenly (Flexbox spesifikasyonunda tanımlanmamıştır)

Aşağıdaki canlı örnekte, flex konteyner 400 piksel yüksekliğe sahip ve bu da öğelerimizi görüntülemek için gerekenden daha fazla bir değer. align-content değerini space-between yaparak, mevcut alanın cross eksende konteynerin başlangıcı ve sonuyla aynı hizada yerleştirilen flex satırları arasında paylaştırıldığını görebiliriz.

align-content özelliğinin nasıl çalıştığını görmek için diğer değerleri deneyin.

.box {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: space-between;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

Bir kez daha, flex-direction‘ı column olarak değiştirerek bu özelliğin sütuna göre çalışırken nasıl davrandığını görebiliriz. Daha önce olduğu gibi, tüm öğeleri görüntüledikten sonra cross eksende biraz daha alan bırakmak istiyoruz. Bu yüzden width değeri de veriyoruz.

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 500px;
  height: 400px;
  align-content: space-between;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

Not: space-evenly değeri flexbox spesifikasyonunda tanımlanmamıştır ve Box Alignment spesifikasyonuna sonradan eklenmiştir. Bu değer için tarayıcı desteği, flexbox belirtiminde tanımlanan değerler kadar iyi değildir.

İçeriği ana eksende hizalama

Artık hizalamanın cross eksende nasıl çalıştığını gördüğümüze göre, ana eksene bir göz atabiliriz. Burada kullanabileceğimiz tek bir özellik var: justify-content. Bunun nedeni, ana eksende yalnızca bir grup olarak öğelerle ilgileniyor olmamızdır. justify-content ile, öğeleri görüntülemek için gerekenden daha fazla alan olması durumunda kullanılabilir alana ne olacağını kontrol ederiz.

Kapsayıcı üzerinde display: flex olan ilk örneğimizde, öğeler bir satır olarak görüntülenir ve hepsi kapsayıcının başlangıcında sıralanır. Bunun nedeni justify-content‘in varsayılan değerinin flex-start olmasıdır. Kullanılabilir herhangi bir boşluk öğelerin sonuna yerleştirilir.

justify-content özelliği align-content ile aynı değerleri kabul eder.

• justify-content: flex-start
• justify-content: flex-end
• justify-content: center
• justify-content: space-between
• justify-content: space-around
• justify-content: space-evenly (Flexbox spesifikasyonunda tanımlanmamıştır)

Aşağıdaki örnekte justify-content değeri space-between‘dir. Öğeler görüntülendikten sonra kullanılabilir alan öğeler arasında dağıtılır. Sol ve sağ öğe, başlangıç ve bitiş ile aynı hizaya gelir.

.box {
  display: flex;
  justify-content: space-between;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Ana eksen blok yönündeyse (flex-direction sütun olarak ayarlanmışsa) justify-content, flex konteynerinde dağıtılacak alan olduğu sürece bu boyuttaki öğeler arasında boşluk dağıtır.

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Hizalama ve Yazma Modları

Tüm bu hizalama yöntemlerinde flex-start ve flex-end değerlerinin yazma moduna duyarlı olduğunu unutmayın. justify-content değeri flex-start ise ve yazma modu soldan sağa ise, öğeler kabın sol tarafından başlayarak sıralanacaktır.

Ancak yazma modu Arapça’da olduğu gibi sağdan sola ise, öğeler kabın sağ tarafından başlayarak sıralanacaktır.

Aşağıdaki canlı örnekte, öğelerimiz için sağdan sola akışı zorlamak amacıyla direction özelliği rtl olarak ayarlandı. Bu özelliği kaldırabilir veya satır yönünün başlangıcı sağda olduğunda flexbox’ın nasıl davrandığını görmek için justify-content değerlerini değiştirebilirsiniz.

.box {
  direction: rtl;
  display: flex;
  justify-content: flex-end;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Hizalama ve flex-direction

Flex-direction özelliğini değiştirirseniz (örneğin row yerine row-reverse kullanırsanız) başlangıç çizgisi de değişecektir.

Sıradaki örnekte flex-direction: row-reverse ve justify-content: flex-end ile düzenlenmiş öğeler var. Soldan sağa bir dilde tüm öğeler solda sıralanır. flex-direction: row-reverse öğesini flex-direction: row olarak değiştirmeyi deneyin. Öğelerin artık sağ tarafta olduğunu göreceksiniz.

.box {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Tüm bunlar biraz kafa karıştırıcı görünse de, hatırlanması gereken kural (değiştirmek için bir şey yapmadığınız sürece) flex öğelerinin kendilerini belgenizin diline uygun olarak satır içi ve satır ekseni boyunca yerleştirdiğidir. flex-start, bir metin cümlesinin başlayacağı yer olacaktır.

flex-direction: column seçeneğini belirleyerek bunları belgenizin dili için blok yönünde görüntülenecek şekilde değiştirebilirsiniz. Bu durumda flex-start, ilk metin paragrafınızın üst kısmının başlayacağı yer olacaktır.

flex-direction’ı reverse değerlerinden birine değiştirirseniz, öğeler son eksenden başlayarak ve tersi sırada yerleştirirler. Dolayısıyla, flex-start bu eksenin sonuna, yani satırlar halinde çalışıyorsanız satırlarınızın sarılacağı konuma veya blok yönünde çalışıyorsanız son metin paragrafınızın sonuna yerleşecektir.

Ana eksen hizalaması için otomatik kenar boşluklarını kullanma

Öğelerimiz bu eksende bir grup olarak ele alındığından, ana eksende kullanabileceğimiz bir justify-items veya justify-self özelliğine sahip değiliz. Bununla birlikte, flexbox ile birlikte otomatik kenar boşluklarını kullanarak bir öğeyi veya bir grup öğeyi diğerlerinden ayırmak için bazı bireysel hizalamalar yapmak mümkün olabilir.

Örneğin bazı öğelerin sağa hizalandığı ve ana grubun solda olduğu bir gezinme çubuğunu düşünün. Bunun justify-self özelliği için bir kullanım durumu olması gerektiğini düşünebilirsiniz, ancak aşağıdaki görüntüyü göz önünde bulundurun. Bir tarafta üç, diğer tarafta iki öğe var. Eğer d öğesinde justify-self özelliğini kullanabilseydim, ardından gelen e öğesinin hizalamasını da değiştirecekti ki bu her zaman benim istediğim bir şey olmayabilir.

Bunun yerine 4. öğeyi hedefleyebilir ve margin-left değerini auto olarak vererek ilk üç öğeden ayırabiliriz. Otomatik kenar boşlukları kendi eksenlerinde kaplayabildikleri tüm alanı kaplayacaktır – margin auto left ve right ile bir bloğu ortalamak bu şekilde çalışır. Her iki taraf da alabildiği kadar yer kaplamaya çalışır ve böylece blok ortaya doğru itilir.

Aşağıdaki örnekte, temel flex değerleriyle bir satır halinde düzenlenmiş flex öğelerimiz var. push sınıfı için de margin-left: auto özelliğini yazdık. Nasıl çalıştığını görmek için bunu kaldırmayı veya sınıfı başka bir öğeye eklemeyi deneyebilirsiniz.

.box {
  display: flex;
}
.push {
    margin-left: auto;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div class="push">Four</div>
  <div>Five</div>
</div>

Öğeler arasında boşluklar oluşturma

Flex öğeleri arasında boşluk oluşturmak için gap, column-gap ve row-gap özelliklerini kullanın. column-gap özelliği, ana eksendeki öğeler arasında boşluklar oluşturur. row-gap özelliği, flex-wrap özelliğini wrap olarak ayarladığınızda flex satırları arasında boşluklar oluşturur. gap özelliği, her ikisini birlikte ayarlayan bir kısaltmadır.

.box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 2em;
}

.box > * {
  flex: 1;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>