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.
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.
Ç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.
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.
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
: Öğelerflex-basis
değerlerinden daha küçük olabilir.flex-basis: auto
: Öğelerin temel boyutuauto
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 boyutuflex-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 boyutuauto
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 boyutuflex-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 boyutu0
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
column
Varsayılan olarak, esnek kapsayıcı alt öğeleri sarmalar.
flex-wrap: wrap
ile display: flex
kullanınEsnek bir alt öğe sıkışmış olarak görünür. Hangi esnek özellik bunu azaltmaya yardımcı olur?
flex-grow
flex-shrink
flex-basis
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
.container { display: flex; direction: ltr; }
Flexbox ile yatay olarak hizalamak için
.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
align-content: start
content
, esnek çizgileri hizalar, alt öğe hizalamasını değil.height: auto
align-items: flex-start
Kaynaklar
- MDN CSS Esnek Kutu Düzeni, örneklerin yer aldığı bir dizi ayrıntılı kılavuz içerir.
- Flexbox için CSS Püf Noktaları Kılavuzu
- Flexbox Esnek Kapsayıcı Oluşturduğunuzda Neler Olur?
- Flexbox'ta Hizalama Hakkında Bilmeniz Gereken Her Şey
- Bu 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