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:
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
: Öğelerflex-basis
değerine göre daha az küçülebilir.flex-basis: auto
: Öğelerin temel boyutuauto
.
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 boyutuauto
'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
: Öğelerflex-basis
değerine göre daha az küçülebilir.flex-basis: 0
: Öğelerin taban boyutu0
'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
Varsayılan flex-direction
column
row
Varsayılan olarak bir esnek kapsayıcı, alt öğeleri sarmalar.
Bir flex alt öğesi sıkıştırılmış görünüyor. Bu sorunu azaltmaya yardımcı olan flex özelliği nedir?
flex-basis
flex-grow
flex-shrink
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; }
Flexbox ile dikey olarak hizalamayı
.container { display: flex; direction: ltr; }
Flexbox ile yatay olarak hizalamayı
.container { display: flex; direction: ltr; }
Flex öğeler varsayılan olarak stretch
ile hizalanır. İçerik boyutunun alt öğeler için kullanılmasını isterseniz aşağıdaki stillerden hangisini kullanırsınız?
justify-content: flex-start
align-content: start
align-items: flex-start
height: auto
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