giriiş
CSS flexbox düzenlerine yönelik kapsamlı rehberimiz. Bu kapsamlı rehber, flexbox hakkında her şeyi açıklayarak, ana öğe (flex container) ve alt öğeler (flex items) için olası tüm farklı niteliklere odaklanıyor. Ayrıca geçmiş, demolar, şablonlar ve bir tarayıcı destek tablosu da içeriyor.
Bağlam
Flexbox düzen modülü (Ekim 2017'den itibaren W3C aday önerisi), boyutları bilinmese ve/veya dinamik olsa bile (bu nedenle "esnek" kelimesi) bir konteyner içindeki öğeler arasındaki boşluğu düzenlemek, hizalamak ve dağıtmak için daha verimli bir yol sağlamayı amaçlamaktadır.
Esnek bir düzenin arkasındaki temel fikir, konteynerin öğelerinin genişliğini/yüksekliğini (ve sırasını) mevcut alanı en iyi şekilde dolduracak şekilde değiştirmesine olanak tanımaktır (çoğunlukla çeşitli görüntüleme aygıtlarına ve ekran boyutlarına uyum sağlamak için). Esnek bir konteyner, öğeleri mevcut boş alanı dolduracak şekilde genişletir veya taşmayı önlemek için daraltır.
En önemlisi, flexbox düzeni, normal düzenlerin (yatay düzene göre dikey olarak hizalanmış ve satır içi bir blok) aksine, yönlüdür. Sayfalar için iyi çalışsalar da, büyük veya karmaşık uygulamaları (özellikle yön değiştirme, yeniden boyutlandırma, genişletme, daraltma vb. söz konusu olduğunda) destekleyecek esneklikten (kasıtlı olarak kelime oyunu yapılmamıştır) yoksundurlar.
Not: Flexbox düzeni uygulama bileşenleri ve küçük ölçekli düzenler için daha uygundur, Grid düzeni ise daha büyük ölçekli düzenler için tasarlanmıştır.
Temel bilgiler ve terminoloji
Flexbox tek bir özellik değil, eksiksiz bir modül olduğundan, tüm özellik seti de dahil olmak üzere birçok öğeyi içerir. Bunlardan bazıları kapsayıcıya (üst öğe, "esnek kapsayıcı" olarak bilinir) ayarlanmak üzere tasarlanmıştır, diğerleri ise alt öğelere (alt öğeler olarak bilinir, "esnek öğeler") ayarlanmak üzere tasarlanmıştır.
"Normal" düzen hem blok hem de hat içi akış yönlerine dayanıyorsa, esnek düzen "esnek akış yönlerine" dayanır. Lütfen bu şartname biçimine bir göz atın; esnek düzenin arkasındaki ana fikri açıklar.
Öğeler ana eksen boyunca (ana başlangıçtan ana sona) veya çapraz eksen boyunca (çapraz başlangıçtan çapraz uca) yerleştirilir.
- Ana eksen – Esnek kabın ana ekseni, esnek parçaların yerleştirildiği birincil eksendir. Dikkatli olun, yatay olması gerekmez. Bu, flex-direction özelliğine bağlıdır (aşağıya bakın).
- Ana Başlangıç | Ana Son – Esnek ürünler ana başlangıçtan başlanarak ana uca doğru konteynerin içerisine yerleştirilir.
- Orijinal boyut – Esnek bir öğenin genişliği veya yüksekliği, orijinal boyutta hangisiyse, öğenin orijinal boyutudur. Esnek öğenin orijinal boyut özelliği, orijinal boyutta hangisiyse "genişlik" veya "yükseklik" özelliğidir.
- Çapraz eksen – Ana eksene dik olan eksene çapraz eksen denir. Yönü, ana eksenin yönüne bağlıdır.
- Çapraz başlangıç | çapraz son – Esnek hatlar, esnek kabın çapraz başlangıç tarafından başlanarak çapraz uca doğru hareket ettirilerek ürünlerle doldurulur ve kabın içine yerleştirilir.
- Çapraz boyut – Esnek bir öğenin genişliği veya yüksekliği, çapraz boyutta hangisi varsa, öğenin çapraz boyutudur. Çapraz boyut özelliği, çapraz boyutta hangisi varsa, "genişlik" veya "yükseklik"tir.
Flexbox Özellikleri
Ebeveynler için özellikler
(konteyner)
Ebeveynler için özelliklerGörüntülemek
Bu, esnek bir kapsayıcı tanımlar. Verilen değere bağlı olarak satır içi veya blok halinde. Tüm doğrudan alt öğeleri için esnek bir bağlam sağlar.
.container {
display: flex; /* or inline-flex */
}esnek yön
Bu, birincil ekseni oluşturur ve böylece esnek öğelerin esnek kutuya yerleştirileceği yönü belirler. Esnek kutu (isteğe bağlı sarma hariç) tek yönlü bir düzen konseptidir. Esnek öğelerin çoğunlukla yatay sıralar veya dikey sütunlar halinde olduğunu düşünün.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}- SATIR (varsayılan): Ltr'de soldan sağa. Sağdan sola
- satır-ters: uzunlamasınada sağdan sola. sağdan sola.
- SÜTUN: Satır gibi ancak yukarıdan aşağıya doğru
- Sütun-ters: Ters satıra benzer ancak aşağıdan yukarıya doğru
Esnek Sarma
Varsayılan olarak, esnek öğelerin tümü tek bir satıra sığmaya çalışır. Bunu değiştirebilir ve gerekirse öğelerin bu özellik kullanılarak kapatılmasına izin verebilirsiniz.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}- nowrap (varsayılan): Tüm esnek öğeler tek bir satıra sarılacak
- sarma: Esnek öğeler, yukarıdan aşağıya doğru birden fazla satıra sarılır.
- wrap-reverse: Esnek öğeler alttan üste doğru birden fazla satıra sarılır.
FLEX-Flow
Bu, flex-direction ve flex-width özelliklerinin kısaltmasıdır ve birlikte flex konteynerinin ana ve çapraz eksenlerini belirtir. Varsayılan değer row nowrap'tır.
.container {
flex-flow: column wrap;
}İçeriği Haklı Çıkar
Bu, ana eksen boyunca hizalamayı belirler. Bir satırdaki tüm esnek öğeler esnek olmadığında veya esnek olduğunda ancak maksimum boyutlarına ulaştığında fazla beyaz boşluğun dağıtılmasına yardımcı olur. Ayrıca, öğeler satırdan taştığında öğelerin hizalanması üzerinde bir miktar kontrol sağlar.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}- flex-start (varsayılan): Öğeler flex yönünün başlangıcına doğru paketlenir.
- flex-end: Ürünler flex yönünün sonuna doğru paketlenir.
- BAŞLAT: Öğeler yazma modu yönünün başlangıcına doğru paketlenir.
- SON: Öğeler yazma modu yönünün sonuna doğru paketlenir.
- SOL: Öğeler, esnek yönle uyumlu olmadığı sürece konteynerin sol kenarına doğru paketlenir, o zaman başlangıç gibi davranır.
- SAĞ: Öğeler konteynerin sağ kenarına doğru paketlenir, ancak bu yönde esnek olmak mantıklıysa, o zaman son gibi davranır.
- MERKEZ: Öğeler çizgi boyunca ortalanır.
- Aradaki Boşluk: Öğeler çizgi üzerinde eşit olarak dağıtılır. İlk öğe başlangıç çizgisinde, son öğe bitiş çizgisinde bulunur.
- Boşluk-Çevre: Öğeler, etraflarında eşit boşluk olacak şekilde bir çizgi üzerinde eşit olarak dağıtılır. Görsel olarak boşlukların eşit olmadığını unutmayın, çünkü tüm öğelerin her iki tarafında da eşit boşluk vardır. İlk öğenin kabın kenarında bir birim boşluk olacak, ancak bir sonraki öğenin kendi boşluğu uygulandığı için bir sonraki öğe arasında iki birim boşluk olacaktır.
- Eşit Aralık: Öğeler, herhangi iki öğe arasındaki mesafenin (ve kenarlara olan mesafenin) eşit olacak şekilde dağıtılır.
Bu değerlerle eşleştirebileceğiniz iki ek anahtar kelime daha var: güvenli ve güvensiz. Güvenli kullanmak, bu tür konumlandırmayı nasıl yaparsanız yapın, bir öğeyi sayfadan o kadar uzağa (örneğin, sayfanın üst kısmından) itemeyeceğinizden ve içeriğin kaydırılamayacağından emin olmanızı sağlar ("veri kaybı" olarak bilinir).
Hizala-Öğeler
Bu, esnek öğelerin geçerli satırdaki çapraz eksen boyunca nasıl düzenleneceğinin varsayılan davranışını tanımlar. Bunu, çapraz eksenin (ana eksene dik) içerik gerekçelendirme sürümü olarak düşünün.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}- STREtch (varsayılan): Kabı doldurmak için ger (hâlâ min/maks genişliğe saygı gösterir)
- flex-start / start / self-start: Öğeler çapraz eksenin başına yerleştirilir. Bunlar arasındaki fark inceliklidir ve esneklik yönü kurallarına veya yazma modu kurallarına uyulmasıyla ilgilidir.
- flex-end / end / self-end: Öğeler çapraz eksenin sonuna yerleştirilir. Aradaki fark yine inceliklidir ve flex yön kurallarına uymakla, yazma modu kurallarına uymakla ilgilidir.
- MERKEZ: Öğeler çapraz eksende yer alır
- TEMEL: Öğeler, temel çizgileri gibi hizalanır
ALign-İçerik
Çapraz eksende fazladan boşluk olduğunda, esnek kapsayıcı çizgileri içeride hizalar; tıpkı justify-content'in ana eksendeki bireysel öğeleri hizalamasına benzer.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}- Normal (varsayılan): Öğeler, hiçbir değer ayarlanmamış gibi varsayılan konumlarına paketlenir.
- flex-start / start: Konteynerin başına sarılmış öğeler. flex-start (daha fazla destekle) flex yönünü belirtirken, start yazma modu yönünü dikkate alır.
- flex-end / end: Konteynerin sonuna kadar sarılmış öğeler. (Daha fazla destek) flex-end flex yönünü belirtirken end yazma modu yönünü dikkate alır.
- MERKEZ: Kabın merkezinde bulunan öğeler
- Boşluk-Aralık: Öğeler eşit aralıklarla yerleştirilir. İlk satır kabın başında, son satır ise kabın sonunda bulunur.
- Boşluk-Çevre: Öğeler her satırın etrafında eşit boşluk olacak şekilde eşit şekilde dağıtılır.
- Eşit Alan: Öğeler etraflarında eşit boşluk olacak şekilde eşit şekilde dağıtılır
- germek: Kalan alanı kaplamak için çizgiler gerilir.
Boşluk, Satır Boşluğu, Sütun Boşluğu
Boşluk özelliği, esnek öğeler arasındaki boşluğu açıkça kontrol eder. Bu boşluk yalnızca öğeler arasında geçerlidir, dış kenarlarda geçerli değildir.
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}Bu davranış, minimal oluk oluşumu olarak düşünülebilir; yani, eğer oluk bir şekilde daha büyükse (justify-content: spacing-between; gibi bir şeyden dolayı), bu boşluk yalnızca o alan küçüldüğünde etkili olacaktır.
Bu sadece flexbox'a özgü bir durum değil, boşluklar ızgara ve çok sütunlu düzenlerde de işe yarıyor.
Flexbox öneki
Flexbox, mümkün olan en fazla sayıda tarayıcıyı desteklemek için bazı satıcı öneklerine ihtiyaç duyar. Bu, yalnızca niteliklerin önüne satıcı öneki eklemekle kalmaz, aynı zamanda tamamen farklı özellik adları ve değerlerine sahip olmayı da gerektirir. Bunun nedeni, Flexbox spesifikasyonunun zamanla değişerek "eski", "ara" ve "yeni" sürümler oluşturmasıdır.
Belki de bununla başa çıkmanın en iyi yolu, yeni (ve son) sözdizimini kullanmak ve CSS'inizi, geri alma tuşlarını iyi kullanan Autoprefixer'dan geçirmektir.
Alternatif olarak, bazı önekler konusunda yardımcı olması için bir Sass @mixin de var, bu da size ne tür şeyler yapmanız gerektiği konusunda fikir verecektir:
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}Örnekler
Çok, çok basit bir örnekle başlayalım; neredeyse günlük bir problemi çözmeye çalışalım: mükemmel odaklanma. Flexbox kullanıyorsanız, bundan daha basit olamazdı.
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}Bunun nedeni, esnek bir kapta otomatik ayarlanan kenar boşluğunun ekstra alan kaplamasıdır. Dolayısıyla, otomatik ayarlanan kenar boşluğunu ayarlamak, öğenin her iki eksende de mükemmel şekilde ortalanmasını sağlar.
Şimdi birkaç özellik daha kullanalım. Hepsi sabit boyutlara sahip, ancak otomatik boyutlandırılabilen 6 öğeden oluşan bir liste düşünün. Tarayıcıyı yeniden boyutlandırdığımızda, herhangi bir medya isteği olmadan her şeyin düzgün bir şekilde ölçeklenebilmesi için, öğelerin yatay eksende eşit olarak dağıtılmasını istiyoruz.
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}Tamamdır. Geri kalan her şey sadece bir stil meselesi. Aşağıda bir kalem gösteriliyor. Ne olacağını görmek için CodePen'e gidip pencerelerinizin boyutunu değiştirmeyi unutmayın.
Başka bir şey deneyelim. Web sitemizin üst kısmında sağa hizalanmış bir gezinme öğemiz olduğunu, ancak bunu orta büyüklükteki ekranlarda ortalayıp küçük cihazlarda tek bir sütun olarak görüntülemek istediğimizi varsayalım. Yeterince basit.
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}
Esnek öğelerin esnekliğiyle oynayarak daha iyisini deneyelim! Tam genişlikte üstbilgi ve altbilgi içeren, mobil öncelikli 3 sütunlu bir düzen nasıl olur? Hem de kaynak sırasından bağımsız.
<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>.wrapper {
display: flex;
flex-flow: row wrap;
}
/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}
/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
