Flexbox

CSS Podcast - 010: Flexbox

Duyarlı tasarımda yanıltıcı olabilecek bir tasarım kalıbı, bazı içeriklerle aynı hizada bulunan bir kenar çubuğudur. Görüntü alanı olduğunda bu kalıp işe yarar. Ancak alan daraltıldığında bu sabit düzen sorun yaratabilir.

Esnek Kutu Düzeni Modeli (flexbox), tek boyutlu içerikler için tasarlanmış bir düzen modelidir. Farklı boyutlara sahip birçok öğeyi alma ve bu öğeler için en iyi düzeni döndürme konusunda başarılıdır.

Bu, bu kenar çubuğu kalıbı için ideal düzen modelidir. Flexbox, kenar çubuğunu ve içeriği satır içi olarak düzenlemenin yanı sıra, yeterli alan kalmadığında kenar çubuğu yeni bir satıra dönüşür. Tarayıcının izleyeceği katı boyutlar ayarlamak yerine flexbox ile içeriğin nasıl görüntüleneceğine dair ipucu vermek için esnek sınırlar sağlayabilirsiniz.

Esnek düzenle neler yapabilirsiniz?

Esnek düzenler aşağıdaki özelliklere sahiptir: Bunları bu kılavuzda keşfedebilirsiniz.

  • Satır veya sütun olarak görüntülenebilirler.
  • Belgenin yazma moduna uyarlar.
  • Bunlar varsayılan olarak tek satırdır ancak birden fazla satıra sarmalamaları istenebilir.
  • Düzendeki öğeler, DOM'deki sıralarından alacak şekilde görsel olarak yeniden sıralanabilir.
  • Alan öğelerin içinde dağıtılabilir, böylece üst öğedeki alana göre daha da büyür ve küçülür.
  • Box hizalama özellikleri kullanılarak alan, öğelerin etrafına dağıtılabilir ve çizgileri sarmalanmış bir düzende esnek hale getirebilir.
  • Öğelerin kendisi çapraz eksen üzerinde hizalanabilir.

Ana eksen ve çapraz eksen

Flexbox'ı anlamanın püf noktası, ana eksen ile çapraz eksen kavramlarını anlamaktır. Ana eksen, flex-direction mülkünüz tarafından ayarlanan eksendir. Bu row ise ana ekseniniz satır boyunca; column ise ana ekseniniz sütun boyuncadır.

Soldan sağa giden bir okla yan yana duran üç kutu. Ok, Ana eksen olarak etiketlenmiştir

Esnek öğeler ana eksende grup olarak hareket eder. Unutmayın: Elimizde çok sayıda öğe var ve grup halinde bunlar için en iyi düzeni oluşturmaya çalışıyoruz.

Çapraz eksen, ana eksene doğru diğer yönde uzanır. Dolayısıyla flex-direction row ise çapraz eksen, sütun boyunca ilerler.

Soldan sağa doğru bir okla yan yana duran, farklı yükseklikte üç kutu. Ok, Ana eksen olarak etiketlenir. Yukarıdan aşağıyı gösteren başka bir ok daha var. Bu, Çapraz eksen olarak etiketlenmiştir

Çapraz eksende iki şey yapabilirsiniz. Öğeleri birbirlerine ve esnek kapsayıcıya göre hizalanacak şekilde ayrı ayrı veya grup olarak taşıyabilirsiniz. Ayrıca, sarmalanmış esnek çizgileriniz varsa bu satırlara nasıl alan atanacağını kontrol etmek için bu satırları bir grup olarak değerlendirebilirsiniz. Tüm bunların işleyiş şeklini bu kılavuz boyunca göreceksiniz. Şimdilik sadece ana eksenin flex-direction öğenizi takip ettiğini unutmayın.

Esnek kapsayıcı oluşturma

Farklı boyutlardaki bir öğe grubunu alıp bunları yerleştirmek için flexbox'ı kullanarak flexbox'ın nasıl davrandığına göz atalım.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

Flexbox'ı kullanmak için normal blok ve satır içi düzen değil, flex biçimlendirme bağlamı kullanmak istediğinizi beyan etmeniz gerekir. Bunun için display özelliğinin değerini flex olarak değiştirin.

.container {
  display: flex;
}

Düzen kılavuzunda öğrendiğiniz gibi bu özellik size esnek öğe alt öğelerini içeren blok düzeyinde bir kutu verecektir. Esnek öğeler, başlangıç değerlerini kullanarak hemen bir miktar flexbox davranışı sergilemeye başlar.

Başlangıç değerleri şu anlamlara gelir:

  • Öğeler bir satır olarak görüntülenir.
  • Kaydırmazlar.
  • Kubbeyi doldurmak için büyümezler.
  • Bunlar, kapsayıcının başında sıralanır.

Öğelerin yönünü kontrol etme

Henüz flex-direction özelliği eklememiş olsanız bile flex-direction özelliğinin başlangıç değeri row olduğu için öğeler satır olarak gösterilir. Satır istiyorsanız özelliği eklemeniz gerekmez. Yönü değiştirmek için özelliği ve aşağıdaki dört değerden birini ekleyin:

  • row: Öğeler satır halinde yer alır.
  • row-reverse: öğeleri, esnek kapsayıcının sonundan itibaren bir satır halinde yerleştirilecek.
  • column: Öğeler bir sütun halinde düzenlenir.
  • column-reverse : Öğeler esnek kapsayıcının sonundan itibaren bir sütun halinde düzenlenir.

Aşağıdaki demoda öğe grubumuzu kullanarak tüm değerleri deneyebilirsiniz.

Öğe akışını ve erişilebilirliği tersine çevirme

Erişilebilirliği olumsuz yönde etkileyebileceği için görsel görünümü HTML belgesindeki sıralamadan farklı şekilde yeniden sıralayan özellikleri kullanırken dikkatli olmalısınız. row-reverse ve column-reverse değerleri, bunun için iyi bir örnektir. Yeniden sıralama yalnızca görsel sıralama için yapılır, mantıksal sıralama için geçerli değildir. Mantıksal sıra, ekran okuyucunun içeriği okuyacağı ve klavyeyi kullanarak gezinen herkesin bunu takip edeceği sıra olduğundan, bu işlemin anlaşılması önemlidir.

Aşağıdaki videoda, ters çevrilen bir satır düzeninde, klavyeyle gezinme görsel ekranı değil DOM'u izlediğinden bağlantılar arasındaki sekmenin bağlantısının nasıl kesildiğini görebilirsiniz.

Flexbox veya ızgaradaki öğelerin sırasını değiştirebilecek herhangi bir öğe bu soruna neden olabilir. Bu nedenle, yeniden sıralamalarda bazı kişiler için sitenizin kullanımını zorlaştırmayacağının kontrolü, kapsamlı testler yapılmalıdır.

Daha fazla bilgi için:

Yazma modları ve yönü

Esnek öğeler varsayılan olarak bir satır şeklinde yerleştirilir. Bir satır, yazma modunuzda ve komut dosyası yönünüzde cümlelerin akışı yönünde uzanır. Bu, sağdan sola (rtl) komut dosyası yönü olan Arapça dilinde çalışıyorsanız öğelerin sağ tarafta sıralanacağı anlamına gelir. Arapçada cümleler bu şekilde okunduğu için sekme sırası da sağ taraftan başlar.

Bazı Japonca yazı tiplerinde olduğu gibi dikey yazma moduyla çalışıyorsanız bir satır dikey olarak, yukarıdan aşağıya doğru görüntülenir. Dikey yazma modu kullanan bu demoda flex-direction öğesini değiştirmeyi deneyin.

Bu nedenle, esnek öğelerin varsayılan davranış şekli dokümanın yazma moduyla bağlantılıdır. Çoğu eğitim, İngilizce veya başka bir yatay yönde, soldan sağa yazma modu kullanılarak yazılır. Bu, esnek öğelerin solda hizalanıp yatay olarak hizalandığını varsaymayı kolaylaştırır.

Ana ve çapraz eksenle birlikte yazma moduyla birlikte flexbox'ta üst, alt, sol ve sağ yerine başlangıç ve bitiş sütunlarından bahsetmemizin anlaşılması daha kolay olabilir. Her eksenin bir başlangıcı ve bitişi vardır. Ana eksenin başlangıcına main-start adı verilir. Böylece, esnek öğelerimiz başlangıçta ana başlangıçtan itibaren hizalanır. Bu eksenin sonu main-end'dir. Çapraz eksenin başlangıcı çapraz başlangıç ve bitiş çapraz uçtur.

Yukarıdaki terimlerin etiketli diyagramı

Esnek öğeleri sarmalama

flex-wrap özelliğinin başlangıç değeri nowrap olur. Bu, kapsayıcıda yeterli alan yoksa öğelerin taşacağı anlamına gelir.

İçinde dokuz öğe bulunan esnek bir kapsayıcı olan öğeler, bir kelime bir satıra gelecek şekilde küçültülmüştür ancak bunları yan yana göstermek için yeterli alan olmadığından esnek öğeler kapsayıcının dışına genişlemiştir.
Minimum içerik boyutuna ulaştıklarında esnek öğeler kapsayıcılarından taşmaya başlar

Başlangıç değerleri kullanılarak görüntülenen öğeler, taşma gerçekleşmeden önce mümkün olduğunca küçük bir boyuta (min-content) küçültülür.

Öğelerin sarmalanmasını sağlamak için esnek kapsayıcıya flex-wrap: wrap öğesini ekleyin.

.container {
  display: flex;
  flex-wrap: wrap;
}

Bir Esnek kapsayıcı sarmalandığında birden çok esnek çizgi oluşturulur. Alan dağılımı açısından bakıldığında, her satır yeni bir esnek kapsayıcı gibi davranır. Bu nedenle, satırları sarmalıyorsanız 2. satırdaki bir öğenin 1. satırda üstünde bulunan bir şeyle aynı hizada olmasını sağlamak mümkün değildir. flexbox'ın tek boyutlu olması bu durumu ifade eder. Hizalamayı bir eksende, bir satırda veya sütunda kontrol edebilirsiniz. Izgarada olduğu gibi her ikisini birlikte kontrol edemezsiniz.

Esnek akış kısaltması

flex-direction ve flex-wrap özelliklerini flex-flow kısayolunu kullanarak ayarlayabilirsiniz. Örneğin, flex-direction öğesini column olarak ayarlamak ve öğelerin sarmalanmasına izin vermek için:

.container {
  display: flex;
  flex-flow: column wrap;
}

Esnek öğelerin içindeki alanı kontrol etme

Kapsayıcımızda, öğelerin gösterilmesi için gerekenden daha fazla alan olduğu varsayıldığında öğeler başlangıçta hizalanır ve alanı dolduracak şekilde büyümez. Maksimum içerik boyutunda büyümeyi durdururlar. Bunun nedeni flex- özelliklerinin başlangıç değerinin şöyle olmasıdır:

  • flex-grow: 0: Öğeler artmaz.
  • flex-shrink: 1: Öğeler flex-basis değerlerinden daha küçük olabilir.
  • flex-basis: auto: Öğelerin temel boyutu auto olur.

Bu, flex: initial anahtar kelime değeriyle temsil edilebilir. flex steno özelliği veya flex-grow, flex-shrink ve flex-basis uzun işaretleri, esnek kapsayıcının alt öğelerine uygulanır.

Büyük öğelerin küçüklere kıyasla daha fazla alana sahip olmasına izin verirken öğelerin büyümesini sağlamak için flex:auto kullanılır. Yukarıdaki demoyu kullanarak bunu deneyebilirsiniz. Bu işlem, özellikleri şu şekilde ayarlar:

  • flex-grow: 1: Öğelerin boyutu flex-basis değerinden daha büyük olabilir.
  • flex-shrink: 1: öğeler, flex-basis değerinden daha küçük küçülebilir.
  • flex-basis: auto: Öğelerin temel boyutu auto olur.

Öğeler arasında paylaşılan alan, her bir öğe maksimum içerik boyutu olarak belirlendikten sonra paylaşıldığı için flex: auto kullanıldığında öğeler farklı boyutlara sahip olur. Böylece büyük bir öğe daha fazla alan kaplar. Tüm öğeleri tutarlı boyutta olmaya zorlamak ve içerik boyutunu göz ardı etmek için demoda flex:auto flex: 1 olarak değiştirin.

Bu işlem, şunları açar:

  • flex-grow: 1: Öğelerin boyutu flex-basis değerinden daha büyük olabilir.
  • flex-shrink: 1: öğeler, flex-basis değerinden daha küçük küçülebilir.
  • flex-basis: 0: Öğelerin temel boyutu 0 olur.

flex: 1 kullanıldığında tüm öğeler sıfır boyuta sahiptir, bu nedenle esnek kapsayıcıdaki tüm alan dağıtılabilir. Tüm öğelerin flex-grow faktörü 1 olduğundan, hepsi eşit şekilde büyür ve alan eşit olarak paylaşılır.

Öğelerin farklı hızlarda büyümesine izin verme

Tüm öğelere 1 flex-grow faktörünü vermeniz gerekmez. Esnek öğelerinize farklı flex-grow faktörleri verebilirsiniz. Aşağıdaki demoda ilk öğe flex: 1, ikinci flex: 2 ve üçüncü flex: 3 öğe içeriyor. Bu öğeler 0 oranından büyüdükçe esnek kapsayıcıdaki kullanılabilir alan altıya bölünür. Bir parça ilk öğeye iki bölüm, ikinciye iki bölüm, üçüncüye üç bölüm verilir.

Aynı şeyi auto değerinden flex-basis ile de yapabilirsiniz ancak üç değeri belirtmeniz gerekir. Birinci değer flex-grow, ikinci flex-shrink ve üçüncü flex-basis'dir.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

auto öğesinin flex-basis kullanılmasının nedeni, tarayıcının alan dağılımını belirlemesine izin vermek olduğundan bu, daha az yaygın bir kullanım alanıdır. Bir öğenin algoritmanın karar verdiğinden biraz daha fazla büyümesini sağlamak istiyorsanız bu yöntem faydalı olabilir.

Esnek öğeleri yeniden sıralama

Esnek kapsayıcınızdaki öğeler order özelliği kullanılarak yeniden sıralanabilir. Bu özellik, öğelerin sıralı gruplarda sıralanmasına olanak tanır. Öğeler, flex-direction tarafından belirtilen yönde, en düşük değerlerden önce yer alır. Birden fazla öğe aynı değere sahipse bu değere sahip diğer öğelerle birlikte görüntülenir.

Aşağıdaki örnekte bu sıralama gösterilmektedir.

Öğrendiklerinizi sınayın

Flexbox bilginizi test edin

Varsayılan flex-direction

row
Varsayılan olarak flexbox öğeleri bir satıra sığdırarak en başta hizalar. Sarmalama etkinken çocukların içe aktarabileceği satırlar oluşturmaya devam eder.
column
Esnek yönü sütuna ayarlamak öğeleri yığınlamak için harika bir yoldur, ancak bu varsayılan değer değildir.

Varsayılan olarak, esnek kapsayıcı alt öğeleri sarmalar.

true
Sarmalama etkinleştirilmelidir.
false
Alt öğeleri sarmalamak için flex-wrap: wrap ile display: flex kullanın

Esnek bir alt öğe sıkışmış olarak görünür. Hangi esnek özellik bunu azaltmaya yardımcı olur?

flex-grow
Bu özellik, öğelerin temelde nasıl davranması gerektiğini değil, temel bir boyutun ötesine geçip geçemeyeceğini açıklar.
flex-shrink
Evet. Bu özellik, genişlik temelin altına düştüğünde boyutlandırmanın nasıl yapılacağını açıklar.
flex-basis
Bu, boyutlandırma için başlangıç noktası sağlar, ancak sıkışık senaryoda olduğu gibi genişliğin temelin altına düştüğü boyut senaryolarının nasıl ele alınacağını belirtmez.

Flexbox hizalamasına genel bakış

Flexbox, öğeleri hizalamak ve öğeler arasında alan dağıtmak için bir dizi özellik sundu. Bu özellikler o kadar kullanışlı ki kendi teknik özelliklerine taşındıktan sonra bunları Izgara Düzeni'nde de göreceksiniz. Flexbox'ı kullandığınızda bunların nasıl çalıştığını buradan öğrenebilirsiniz.

Özellik grubu iki gruba yerleştirilebilir. Boşluk dağılımına ilişkin özellikler ve hizalamayla ilgili özellikler. Alan dağıtan mülkler şunlardır:

  • justify-content: Ana eksende alan dağılımı.
  • align-content: çapraz eksende alan dağılımı.
  • place-content: Yukarıdaki özelliklerin her ikisini de ayarlamak için kullanılan bir kısaltmadır.

Flexbox'ta hizalama için kullanılan özellikler:

  • align-self: Tek bir öğeyi çapraz eksende hizalar.
  • align-items: Tüm öğeleri çapraz eksende bir grup olarak hizalar.

Ana eksen üzerinde çalışıyorsanız özellikler justify- ile başlar. Çapraz eksende align- ile başlarlar.

Ana eksende alan dağıtma

Daha önce kullanılan HTML'de, satır olarak yerleştirilen esnek öğeler ana eksende yer alır. Öğeler, esnek kapsayıcıyı tamamen dolduracak kadar büyük değil. justify-content özelliğinin başlangıç değeri flex-start olduğu için öğeler esnek kapsayıcının başında sıralanır. Öğeler başta hizalanır. Varsa ekstra alanlar sonda yer alır.

justify-content özelliğini esnek kapsayıcıya ekleyip flex-end değerini girin. Öğeler kapsayıcının sonunda hizalanıp boş alan başa yerleştirilir.

.container {
  display: flex;
  justify-content: flex-end;
}

Öğeler arasındaki alanı justify-content: space-between ile de dağıtabilirsiniz.

Demodaki değerlerden bazılarını deneyin ve olası değerlerin tamamı için MDN'ye bakın.

flex-direction: column ile

flex-direction özelliğini column olarak değiştirdiyseniz sütun üzerinde justify-content çalışır. Sütun olarak çalışırken kapsayıcınızda boş alan olması için kapsayıcınıza height veya block-size değeri vermeniz gerekir. Aksi takdirde, dağıtım için yeriniz olmaz.

Bu kez flexbox sütun düzeniyle, farklı değerler deneyin.

Esnek çizgiler arasındaki alanı dağıtma

Sarmalanmış bir esnek kapsayıcıyla, çapraz eksende dağıtılacak alanınız olabilir. Bu durumda, justify-content ile aynı değerlere sahip align-content özelliğini kullanabilirsiniz. Öğeleri varsayılan olarak flex-start ile hizalayan justify-content işlevinin aksine align-content ilk değeri stretch'dir. Varsayılan davranışı değiştirmek için esnek kapsayıcıya align-content özelliğini ekleyin.

.container {
  align-content: center;
}

Bunu demoda deneyin. Örnekte, sarmalanmış esnek öğe satırları ve kapsayıcıda biraz boş alan olması için bir block-size bulunuyor.

place-content stenosu

Hem justify-content hem de align-content değerini ayarlamak için place-content değerini bir veya iki değerle kullanabilirsiniz. İlk değerin align-content, ikincisinin de justify-content için kullanıldığını belirtirseniz her iki eksen için de tek bir değer kullanılır.

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

Çapraz eksendeki öğeleri hizalama

Çapraz eksende, align-items ve align-self tuşlarını kullanarak esnek çizgideki öğelerinizi de hizalayabilirsiniz. Bu hizalama için kullanılabilecek alan, esnek kapsayıcının veya sarmalanmış öğe grupları söz konusu olduğunda esnek çizginin yüksekliğine bağlıdır.

align-self ilk değeri stretch olur. Bu nedenle, bir satırdaki esnek öğeler varsayılan olarak en uzun öğenin yüksekliğine kadar uzatılır. Bunu değiştirmek için esnek öğelerinizden herhangi birine align-self özelliğini ekleyin.

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

Öğeyi hizalamak için aşağıdaki değerlerden birini kullanın:

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

MDN'deki değerlerin tam listesini inceleyin.

Bir sonraki demoda flex-direction: row içeren tek bir esnek öğe satırı var. Son öğe, flex kapsayıcının yüksekliğini tanımlar. İlk öğe, flex-start değerine sahip align-self özelliğine sahiptir. İlgili özellikteki değeri, çapraz eksendeki alanı içinde nasıl hareket ettiğini görmek için değiştirmeyi deneyin.

align-self özelliği, öğelere tek tek uygulanır. align-self özelliklerinin tamamını bir grup olarak ayarlamak için esnek kapsayıcıya align-items özelliği uygulanabilir.

.container {
  display: flex;
  align-items: flex-start;
}

Bir sonraki demoda, çapraz eksendeki tüm öğeleri grup olarak hizalamak için align-items değerini değiştirmeyi deneyin.

Flexbox'ta neden kendini haklı çıkarma özelliği yok?

Esnek öğeler ana eksende bir grup görevi görür. Dolayısıyla, tek bir öğeyi bu gruptan ayırmak gibi bir kavram yoktur.

Izgara düzeninde justify-self ve justify-items özellikleri, satır içi eksende çalışarak öğelerin ızgara alanı içinde hizalanmasını sağlar. Esnek düzenlerin öğeleri grup olarak işleme şekli nedeniyle bu özellikler esnek bağlamda uygulanmaz.

Flexbox'ın otomatik kenar boşluklarıyla uyumlu bir şekilde çalıştığını bilmekte fayda vardır. Bir öğeyi gruptan ayırmanız veya grubu iki gruba ayırmanız gerekirse kenar boşluğu uygulayabilirsiniz. Aşağıdaki örnekte son öğenin sol kenar boşluğu auto. Otomatik kenar boşluğu, uygulandığı yöndeki tüm alanı kaplar. Bu da öğeyi sağa doğru iterek grupları böler.

Bir öğeyi dikey ve yatay olarak ortalama

Bir öğeyi başka bir kutunun içinde ortalamak için hizalama özellikleri kullanılabilir. justify-content özelliği, öğeyi satır olan ana eksende hizalar. Çapraz eksendeki align-items özelliği.

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Öğrendiklerinizi sınayın

Flexbox bilginizi test edin

.container {
  display: flex;
  direction: ltr;
}

Flexbox ile dikey olarak hizalamak için

anahtar kelimeleri uyumlu hale getirme
Güzel
anahtar kelimeleri iki yana yasla
Üzgün
 
.container {
  display: flex;
  direction: ltr;
}

Flexbox ile yatay olarak hizalamak için

anahtar kelimeleri uyumlu hale getirme
Üzgün
anahtar kelimeleri iki yana yasla
Güzel
 
.container {
  display: flex;
  direction: ltr;
}

Varsayılan olarak esnek öğeler stretch ile hizalanır. Alt öğeler için içerik boyutunun kullanılmasını isterseniz aşağıdaki stillerden hangisini kullanırsınız?

justify-content: flex-start
İki yana yaslama özelliği dikey hizalama için değil, yatay hizalama içindir.
align-content: start
content, esnek çizgileri hizalar, alt öğe hizalamasını değil.
height: auto
Bunun bir etkisi olmayacaktır.
align-items: flex-start
Evet, bunları dikey olarak "üst" veya "başlangıca" hizalamak istiyoruz. Bu da varsayılan uzatma değerini kaldırır ve bunun yerine içerik yüksekliğini kullanır.

Kaynaklar