Flexbox

The CSS Podcast - 010: Flexbox

Duyarlı tasarımda sorun yaratabilecek bir tasarım kalıbı, bazı içeriklerle satır içi olarak yerleştirilen kenar çubuğudur. Görüntü alanı alanı olduğunda bu kalıp mükemmel çalışır ancak alan daraltıldığında bu katı düzen sorunlu hale gelebilir.

Esnek Kutu Düzeni Modeli (flexbox), tek boyutlu içerik için tasarlanmış bir düzen modelidir. Bu model, farklı bedenlere sahip birkaç öğeyi alma ve bu öğeler için en iyi düzeni döndürme konusunda uzmandır.

Bu, bu kenar çubuğu kalıbı için ideal düzen modelidir. Flexbox, kenar çubuğunun ve içeriğin satır içi olarak düzenlenmesine yardımcı olur. Ayrıca, yeterli alan kalmadığında kenar çubuğunun yeni bir satıra sığmasını sağlar. Tarayıcıya uyması için katı boyutlar ayarlamak yerine, flexbox ile içeriğin nasıl gösterilebileceğine dair ipucu vermek için esnek sınırlar sağlayabilirsiniz.

Esnek düzenlerle neler yapabilirsiniz?

Esnek düzenler, bu kılavuzda keşfedebileceğiniz aşağıdaki özelliklere sahiptir.

• Bunlar satır veya sütun olarak gösterilebilir.
• Dokümanın yazma moduna saygı gösterir.
• Bunlar varsayılan olarak tek satırdır ancak birden çok satıra sarmalanmaları istenebilir.
• Düzendeki öğeler, DOM'deki sıralarının dışında görsel olarak yeniden sıralanabilir.
• Öğelerin içinde boşluk dağıtılabilir. Böylece öğeler, üst öğelerinde bulunan boşluğa göre daha büyük veya daha küçük olur.
• Kutu Hizalama özellikleri kullanılarak, sarmalanmış bir düzendeki öğelerin ve esnek satırların etrafına boşluk dağıtılabilir.
• Öğelerin kendisi çapraz eksende hizalanabilir.

Ana eksen ve çapraz eksen

Flexbox'ı anlamanın anahtarı, ana eksen ve çapraz eksen kavramlarını anlamaktır. Ana eksen, flex-direction mülkünüz tarafından ayarlanan eksendir. Bu değer row ise ana ekseniniz satır boyunca, column ise sütun boyuncadır.

Flex öğeler ana eksende grup halinde hareket eder. Unutmayın: Elimizde çok şey var ve grup olarak onlar için en iyi düzeni elde etmeye çalışıyoruz.

Çapraz eksen, ana eksene göre diğer yönde çalışır. Bu nedenle, flex-direction row ise çapraz eksen sütun boyunca çalışır.

Çapraz eksende iki işlem yapabilirsiniz. Öğeleri tek tek veya grup halinde taşıyarak birbirlerine ve esnek kapsayıcıya hizalayabilirsiniz. Ayrıca, esnek çizgileri sarmaladıysanız bu satırlara alanın nasıl atanacağını kontrol etmek için bunları bir grup olarak değerlendirebilirsiniz. Bu bilgilerin pratikte nasıl kullanıldığını bu kılavuzun ilerleyen bölümlerinde göreceksiniz. Şimdilik ana eksenin flex-direction'nizi takip ettiğini unutmayın.

Esnek kapsayıcı oluşturma

Farklı boyutlarda bir öğe grubu alıp bunları flexbox kullanarak düzenleyelim ve flexbox'un nasıl davrandığını görelim.

<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 yerine esnek biçimlendirme bağlamı kullanmak istediğinizi bildirmeniz gerekir. Bunu yapmak için display özelliğinin değerini flex olarak değiştirin.

.container {
  display: flex;
}

Düzenleme kılavuzunda öğrendiğiniz gibi, bu işlem size esnek öğe alt öğelerine sahip, blok düzeyinde bir kutu verir. Esnek öğeler, ilk değerlerini kullanarak hemen bazı esnek kutu davranışları sergilemeye başlar.

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

• Öğeler satır olarak gösterilir.
• Bunlar sarmalanmaz.
• Kapsayıcıyı dolduracak şekilde büyümezler.
• Bunlar, kapsayıcının başında sıraya girer.

Öğelerin yönünü kontrol etme

Henüz bir 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 mülkü eklemeniz gerekmez. Yönü değiştirmek için mülkü ve dört değerden birini ekleyin:

• row: Öğeler satır halinde düzenlenir.
• row-reverse: Öğeler, flex kapsayıcının sonundan bir satır halinde düzenlenir.
• column: Öğeler sütun şeklinde düzenlenir.
• column-reverse : Öğeler esnek kapsayıcının sonundan bir sütun olarak düzenlenir.

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

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

Görsel görüntülemeyi HTML dokümanındaki sırayla farklı bir şekilde yeniden düzenleyen özellikleri kullanırken dikkatli olmanız gerekir. Bu, erişilebilirliği olumsuz yönde etkileyebilir. row-reverse ve column-reverse değerleri buna iyi bir örnektir. Yeniden sıralama yalnızca görsel sıra için gerçekleşir, mantıksal sıra için geçerli değildir. Mantıksal sıra, ekran okuyucunun içeriği okuyacağı ve klavyeyi kullanarak gezinen kullanıcıların izleyeceği sıra olduğundan bu konuyu anlamak önemlidir.

Aşağıdaki videoda, ters satır düzeninde klavye gezinme görsel ekranı değil DOM'u takip ettiği için bağlantılar arasında sekme tuşuyla geçiş yaparken bağlantıların nasıl bağlantısının kesildiğini görebilirsiniz.

Flexbox veya ızgaradaki öğelerin sırasını değiştirebilecek herhangi bir şey bu soruna neden olabilir. Bu nedenle, sitenizin bazı kullanıcılar için kullanımını zorlaştırmadığından emin olmak amacıyla, yeniden sıralama işleminin kapsamlı bir test içermesi gerekir.

Daha fazla bilgi için:

• İçerikleri yeniden sıralama
• Flexbox ve klavye gezinme bağlantısı kesiliyor

Yazım modları ve yönü

Flex öğeler varsayılan olarak satır olarak düzenlenir. Satırlar, yazım modunuzda ve komut dosyası yönünüzde cümlelerin aktığı yönde ilerler. Bunun anlamı, sağdan sola (rtl) komut dosyası yönü olan Arapça'da çalışıyorsanız öğelerin sağ tarafta hizalanacağıdır. Arapça'da cümleler sağdan sola okunduğu için Sekme sırası da sağdan başlar.

Bazı Japon yazı tipleri gibi dikey yazım moduyla çalışıyorsanız satır, yukarıdan aşağıya doğru dikey olarak ilerler. Dikey yazma modu kullanılan bu demodaki flex-direction öğesini değiştirmeyi deneyin.

Bu nedenle, flex öğelerinin varsayılan davranışı, dokümanın yazma moduyla bağlantılıdır. Çoğu eğitim, İngilizce veya başka bir yatay, soldan sağa yazma modu kullanılarak yazılmıştır. Bu sayede, flex öğelerinin solda hizalandığını ve yatay olarak çalıştığını varsayabilirsiniz.

Ana ve çapraz eksenin yanı sıra dikkate alınacak yazma modu sayesinde, flexbox'ta üst, alt, sol ve sağ yerine start ve end'den bahsettiğimiz gerçeğini daha kolay anlayabiliriz. Her eksenin bir başlangıç ve bitiş noktası vardır. Ana eksenin başlangıcı main-start olarak adlandırılır. Bu nedenle, flex öğelerimiz başlangıçta ana başlangıçtan hizalanır. Bu eksenin sonu main-end'dir. Çapraz eksenin başlangıcı cross-start, sonu ise cross-end olur.

Esnek öğeleri sarmalama

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

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

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

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

Bir flex kapsayıcı sarmalandığında birden fazla flex satırı oluşturur. Alan dağılımı açısından her satır yeni bir esnek kapsayıcı görevi görür. Bu nedenle, satırları sarmalıyorsanız 2. satırdaki bir öğenin 1. satırdaki bir öğeyle hizalanması mümkün değildir. Flexbox'un tek boyutlu olmasıyla kastedilen budur. Hizalamayı, ızgaradaki gibi ikisini birden değil, tek bir eksende, satırda veya sütunda kontrol edebilirsiniz.

Esnek akış kısaltması

flex-direction ve flex-wrap özelliklerini flex-flow kısaltmasını 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;
}

Flex öğelerin içindeki alanı kontrol etme

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

• flex-grow: 0: Öğeler büyümez.
• flex-shrink: 1: Öğeler flex-basis değerine göre daha az küçülebilir.
• flex-basis: auto: Öğelerin temel boyutu auto.

Bu, flex: initial anahtar kelimesi değeriyle temsil edilebilir. flex kısayolu mülkü veya flex-grow, flex-shrink ve flex-basis uzun adları, esnek kapsayıcının çocuklarına uygulanır.

Öğelerin büyümesine neden olmak ve büyük öğelerin küçük öğelere göre daha fazla alana sahip olmasını sağlamak için flex:auto simgesini kullanın. Yukarıdaki demoyu kullanarak bunu deneyebilirsiniz. Bu işlem, özellikleri şu şekilde ayarlar:

• flex-grow: 1: öğeleri, flex-basis'lerinden daha büyük olabilir.
• flex-shrink: 1: öğeleri, flex-basis'lerinden daha küçük olabilir.
• flex-basis: auto: Öğelerin taban boyutu auto'tür.

flex: auto kullanıldığında, öğeler arasında paylaşılan alan her öğe maksimum içerik boyutunda düzenlendikten sonra paylaşılır. Bu nedenle öğeler farklı boyutlarda olur. Bu nedenle, büyük bir öğe daha fazla yer kaplar. Tüm öğelerin tutarlı bir boyuta sahip olmasını zorunlu kılmak ve demodaki içerik boyutunun flex:auto'ten flex: 1'a değiştirilmesini yoksaymak için.

Bu, aşağıdaki şekilde paketten çıkarılır:

• flex-grow: 1: öğeleri, flex-basis'lerinden daha büyük olabilir.
• flex-shrink: 1: Öğeler flex-basis değerine göre daha az küçülebilir.
• flex-basis: 0: Öğelerin taban boyutu 0'tür.

flex: 1 kullanıldığında, tüm öğelerin sıfır boyutu olduğu belirtilir. Dolayısıyla, esnek kapsayıcıdaki tüm alan dağıtılabilir. Tüm öğelerin flex-grow faktörü 1 olduğu için tümü eşit şekilde büyür ve alan eşit olarak paylaşılır.

Öğelerin farklı oranlarda büyümesine izin verme

Tüm öğelere flex-grow faktörü olarak 1 değeri vermenize gerek yoktur. Esnek öğelerinize farklı flex-grow faktörleri atayabilirsiniz. Aşağıdaki demoda ilk öğe flex: 1, ikinci flex: 2 ve üçüncü flex: 3 öğesidir. Bu öğeler 0 tarihinden itibaren büyüdükçe esnek kapsayıcıdaki kullanılabilir alan altı olarak paylaşılır. İlk öğeye bir parça, ikinci öğeye iki parça, üçüncü öğeye üç parça verilir.

Aynı işlemi auto flex-basis'inden de yapabilirsiniz ancak üç değeri belirtmeniz gerekir. İlk değer flex-grow, ikinci değer flex-shrink ve üçüncü değer flex-basis olur.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

auto için flex-basis kullanılma nedeni, tarayıcının alan dağılımını belirlemesine izin vermek olduğundan bu kullanım daha az yaygındır. Bir öğenin algoritmanın belirlediğinden biraz daha fazla büyümesini sağlamak isterseniz bu sizin için yararlı olabilir.

Esnek öğeleri yeniden sıralama

Esnek kapsayıcınızdaki öğeler order mülkü kullanılarak yeniden sıralanabilir. Bu özellik, öğelerin sıralı gruplar halinde sıralanmasına olanak tanır. Öğeler, flex-direction tarafından belirtilen yönde (en düşük değerler önce olacak şekilde) düzenlenir. Birden fazla öğe aynı değere sahipse bu değer, aynı değere sahip diğer öğelerle birlikte gösterilir.

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

Öğrendiklerinizi test etme

Flexbox hakkındaki bilginizi test edin

Flexbox hizalamasına genel bakış

Flexbox, öğeleri hizalamak ve öğeler arasında boşluk dağıtmak için bir dizi özellik getirdi. Bu özellikler o kadar faydalıdır ki artık kendi spesifikasyonlarına taşınmıştır. Bu özelliklerle Izgara Düzeni'nde de karşılaşacaksınız. Bu öğelerin, flexbox'u kullanırken nasıl çalıştığını burada öğrenebilirsiniz.

Mülk grubu iki gruba yerleştirilebilir. Alan dağılımı ve hizalama özellikleri. Alanı dağıtan özellikler ş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 kısaltma.

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 eksende çalışıyorsanız özellikler justify- ile başlar. Çapraz eksende align- ile başlarlar.

Ana eksendeki alan dağıtılıyor

Daha önce kullanılan HTML'de, flex öğeleri satır halinde düzenlendiğinde ana eksende boşluk vardır. Öğeler, flex kapsayıcıyı tamamen dolduracak kadar büyük değildir. justify-content öğesinin ilk değeri flex-start olduğundan öğeler esnek kapsayıcının başında sıralanır. Öğeler başlangıçta hizalanır ve fazladan boşluklar sona eklenir.

justify-content mülkünü flex kapsayıcıya ekleyin, flex-end değerini verin. Böylece öğeler kapsayıcının sonuna dizilir ve yedek alan başlangıca yerleştirilir.

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

justify-content: space-between ile öğeler arasındaki boşluğu da 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 değerini column olarak değiştirdiyseniz sütunda justify-content işlevi çalışır. Sütun olarak çalışırken kapsayıcınızda boş alan olmasını istiyorsanız kapsayıcınız için height veya block-size belirtmeniz gerekir. Aksi takdirde dağıtacak fazla alanınız olmaz.

Bu kez farklı değerleri, bir esnek kutu sütun düzeniyle deneyin.

Esnek çizgiler arasında boşluk dağıtma

Sarmalanmış bir flex kapsayıcıyla çapraz eksende dağıtabileceğiniz alan 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'ün aksine, align-content'nin ilk değeri stretch'tır. 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 esnek öğe satırları sarmalanmış ve kapsayıcıda boş alan olması için block-size karakteri bulunmaktadır.

place-content kısaltması

Hem justify-content hem de align-content'yi ayarlamak için place-content öğesini bir veya iki değerle kullanabilirsiniz. Hem birincinin align-content hem de ikincinin justify-content için kullanılacağı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 */
}

Öğeleri çapraz eksende hizalama

Çapraz eksende, align-items ve align-self kullanarak öğelerinizi flex satırında da hizalayabilirsiniz. Bu hizalama için kullanılabilecek alan, flex kapsayıcının veya sarmalanmış bir öğe grubu söz konusu olduğunda flex satırının yüksekliğine bağlıdır.

align-self öğesinin ilk değeri stretch şeklindedir. 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 align-self mülkünü herhangi bir esnek öğenize 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 listesine bakın.

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

align-self özelliği, öğelere tek tek uygulanır. align-items mülkü, tüm align-self özelliklerini grup olarak ayarlamak için esnek kapsayıcıya uygulanabilir.

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

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

Neden flexbox'ta justify-self yok?

Flex öğeler, ana eksende bir grup olarak çalışır. Bu nedenle, bu gruptan tek bir öğeyi ayırma kavramı yoktur.

justify-self ve justify-items özellikleri, ızgara düzeninde, ızgara alanındaki öğelerin hizalanmasını yapmak için satır içi eksende çalışır. Flex düzenleri öğeleri grup olarak ele aldığından bu özellikler flex bağlamında uygulanmaz.

Esnek kutunun otomatik kenar boşluklarıyla çok iyi çalıştığını bilmek önemlidir. Bir grubun bir öğesini ayırmanız veya grubu iki gruba ayırmanız gerekirse bunu yapmak için bir kenar boşluğu uygulayabilirsiniz. Aşağıdaki örnekte son öğenin sol kenar boşluğu auto oranındadır. Otomatik kenar boşluğu, uygulandığı yöndeki tüm alanı emer. Bu, öğenin sağa itildiği ve böylece grupların bölündüğü anlamına gelir.

Bir öğeyi dikey ve yatay olarak ortalama

Hizalama özellikleri, bir öğeyi başka bir kutunun içinde ortalamak için kullanılabilir. justify-content mülkü, öğeyi ana eksende (satır) hizalar. Çapraz eksendeki align-items mülkü.

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

Öğrendiklerinizi test etme

Flexbox bilginizi test edin

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

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

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

Kaynaklar

• MDN CSS Esnek Kutu Düzeni, örneklerle birlikte bir dizi ayrıntılı kılavuz içerir.
• Flexbox için CSS İpuçları Kılavuzu
• Flexbox Flex Container'ı Oluşturduğunuzda Ne Olur?
• Flexbox'ta Hizalama Hakkında Bilmeniz Gereken Her Şey
• Esnek Kutu Ne Kadar Büyük?
• Flexbox'ın Kullanım Alanları
• Chrome Geliştirici Araçları'nda CSS Flexbox düzenlerini inceleme ve hata ayıklama