Flexbox

The CSS Podcast - 010: Flexbox

Duyarlı tasarımda zor olabilen bir tasarım kalıbı, bazı öğeler için aynı hizada içerik. Görüntü alanı olduğunda, harika çalışıyor, ancak uzayın sıkıştırılmış olduğu yerler daha fazla sorun yaratabilir.

Esnek Kutu Düzen Modeli (flexbox), tek boyutlu içerikler için tasarlanmış bir düzen modelidir. Farklı boyutlara sahip bir grup öğeyi alıp bu öğeler için en iyi düzeni döndürmede mükemmeldir.

Bu, bu kenar çubuğu kalıbı için ideal düzen modelidir. Flexbox yalnızca kenar çubuğunu ve içeriğin satır içine yerleştirilmesine yardımcı olmakla kalmaz, ancak yeterli alan kalmadığında kenar çubuğu yeni bir satıra bölünür. 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 aşağıdaki özelliklere sahiptir. Bu özellikleri bu kılavuzda keşfedebilirsiniz.

• Bunlar satır veya sütun olarak gösterilebilir.
• Belgenin yazma moduna uyarlar.
• Bunlar varsayılan olarak tek satırdır, ancak birden çok satıra kaydırması istenebilir.
• Düzendeki öğeler, DOM'daki sıralarından farklı olarak görsel olarak yeniden düzenlenebilir.
• Alan, öğelerin içine dağıtılabilir, Bu nedenle, ebeveynlerindeki alana göre daha büyük ve daha küçük hale gelirler.
• Alan öğelerin etrafına dağıtılabilir, esnek çizgiler ise sarmalanmış bir düzende gösterilebilir. kullanarak bu özelliği devre dışı bırakabilirsiniz.
• Öğeler çapraz eksende hizalanabilir.

Ana eksen ve çapraz eksen

Flexbox'u anlamanın anahtarı, ana eksen ve çapraz eksen kavramı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 eksenin diğer yönünde uzanır. Yani flex-direction, row ise çapraz eksen sütun boyunca uzanır.

Çapraz eksende iki işlem yapabilirsiniz. Öğeleri tek tek veya grup olarak taşıyabilirsiniz. Böylece öğeler esnek yapıya ve birbirlerine göre hizalanır. anlamına gelir. Ayrıca, esnek çizgileri sarmaladıysanız bu satırlara nasıl alan atanacağını kontrol etmek için bu satırları bir grup olarak ele alabilirsiniz. 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 değil, esnek biçimlendirme bağlamı kullanmak istediğinizi beyan etmeniz gerekir blok ve satır içi düzen. 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ıralanır.

Öğelerin yönünü kontrol etme

Henüz flex-direction mülkü eklememiş olsanız bile flex-direction başlangıç değeri row olduğu için öğeler satır olarak gösterilir. Satır oluşturmak istiyorsanız mülkü 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 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 demoda yer alan öğe grubumuzu kullanarak tüm değerleri deneyebilirsiniz.

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

Görsel ekranın sırasını değiştiren özellikleri kullanırken dikkatli olmanız gerekir. öğelerin nasıl sıralandığına ayak uydurmak da önemlidir. olumsuz yönde etkilemesine neden olabilir. row-reverse ve column-reverse değerleri buna iyi bir örnektir. Yeniden sıralama işlemi yalnızca mantıksal sıraya göre değil, görsel sıraya göre yapılır. 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 çevrilmiş bir satır düzeninde Klavyeyle gezinme görsele değil DOM'ye göre ilerlediğinden bağlantılar arasında geçiş bağlantısı kesilir görüntüleyin.

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:

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

Yazma modları ve yönü

Esnek öğeler varsayılan olarak satır şeklinde düzenlenir. Cümlelerin yazma modunuzda ve alfabede aktığı yönde bir satır uzanır. Yani sağdan sola (rtl) yazı yönü olan Arapça'da çalışıyorsanız öğeler sağ tarafta sıralanır. Cümleler Arapçada okunduğu için sekme sırası sağda 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 kullanan bu demoda flex-direction değiştirmeyi deneyin.

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

Ana ve çapraz eksen ile birlikte kullanabileceğiniz yazma modu sayesinde aslında üst, alt, sol ve sağ yerine başlangıç ve bitiş ifadeleri flexbox'ın anlaşılması daha kolay olabilir. 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ı çapraz başlangıç ve bitiş çapraz-bitiş'tir.

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ğerlerini kullanarak görüntülenen öğeler mümkün olduğunca küçük küçültülür, taşma olmadan önce 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ı gibi davranır. Dolayısıyla, satırları sarmalıyorsanız 2. satırdaki bir öğenin, 1. satırda onun üstünde bir şeyle hizalanması mümkün değildir. Flexbox'ın tek boyutlu olması burada 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ı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;
}

Flex öğelerin içindeki alanı kontrol etme

Kapsayıcımızda öğeleri görüntülemek için gerekenden daha fazla alan olduğunu varsayarsak öğ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: öğeleri flex-basis boyutundan daha küçük olabilir.
• flex-basis: auto: Öğelerin taban boyutu auto'tür.

Bu, flex: initial anahtar kelime değeriyle gösterilebilir. flex kısaltma özelliği, veya flex-grow, flex-shrink ve flex-basis değişkenlerinin alt öğeleri esnek kapsayıcı.

Öğelerin büyümesi için büyük öğelerin küçüklere göre daha fazla alana sahip olmasına izin verirken flex:auto kullanıyor. Yukarıdaki demoyu kullanarak bunu deneyebilirsiniz. Bu işlem, özellikleri şu şekilde ayarlar:

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

flex: auto kullanılması, öğelerin farklı bedenlere sahip olacağı anlamına gelir her öğe bu öğe için düzenlendikten sonra paylaşıldığı için öğeler arasında paylaşılan alan maks. içerik boyutu Dolayısıyla, büyük bir öğe daha fazla alan kazanacaktır. Tüm öğeleri tutarlı bir boyuta zorlamak ve demodaki içerik boyutunun flex:auto'ten flex: 1'e değiştirilmesini yoksaymak için.

Bu, paketi şu amaçlarla açar:

• 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 temel boyutu 0.

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

Öğelerin farklı oranlarda büyümesini sağlama

Tüm öğelere 1 flex-grow faktörünü vermeniz gerekmez. Esnek öğelerinize farklı flex-grow faktörleri atayabilirsiniz. Aşağıdaki demoda ilk öğede flex: 1, ikinci öğede flex: 2 ve üçüncü öğede flex: 3 var. Bu öğeler 0'ten büyüdükçe flex kapsayıcıdaki kullanılabilir alan altıya bölünür. İlk öğeye bir parça verilir, ikinci kısmı, üçte oluşturuyoruz.

Aynı şeyi auto öğesine ait flex-basis ile de yapabilirsiniz, ancak bu üç öğeyi belirtmeniz gerekir değerler. İ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 flex-basis kullanmanın nedeni, tarayıcının alan dağılımını belirlemesine izin vermek olduğundan bu kullanım alanı daha az yaygındır. Ancak bir öğenin, algoritmanın belirlediğinden biraz daha fazla büyümesini istiyorsanız bu özellik 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 yerleştirilmiştir, önce en düşük değerlere. Birden fazla öğe aynı değere sahipse bu öğe, 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

Flexbox hizalamasına genel bakış

Flexbox, öğeleri uyumlu hale getirmek ve öğeler arasında alan dağıtmak için bir dizi özellik sunar. Bu özellikler o kadar faydalıydı ki kendi spesifikasyonlarına taşındı. Bu özelliklere ızgara düzeninde de rastlayabilirsiniz. Bu öğelerin, flexbox'u kullanırken nasıl çalıştığını burada öğrenebilirsiniz.

Özellik grubu iki gruba yerleştirilebilir. Alan dağılımı ve hizalama özellikleri. Alan dağıtan tesisler şunlardır:

• justify-content: Ana eksendeki 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 olarak yerleştirildiğinde ana eksende boşluk vardır. Öğeler esnek kapsayıcıyı tamamen dolduracak kadar büyük değil. justify-content başlangıç değeri flex-start olduğu için öğeler flex 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 bazı değerleri deneyin, ve tüm talimatlar için MDN'ye bakın olası değerleri.

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ı için kapsayıcınıza height veya block-size. Aksi takdirde, dağıtım için yeterli alanınız olmaz.

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

Esnek çizgiler arasındaki boşluğu dağıtma

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

.container {
  align-content: center;
}

Bunu demoda deneyin. Örnekte sarmalanmış esnek öğeler, ve kapsayıcıda block-size var.

place-content sloganı

Hem justify-content hem de align-content'yi ayarlamak için place-content'yi bir veya iki değerle kullanabilirsiniz. Hem ilk değerin align-content için hem de ikinci değerin 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, esnek kapsayıcının yüksekliğine bağlıdır. veya esnek çizgiyi seçin.

align-self öğesinin başlangıç değeri: stretch, 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 listesini inceleyin.

Sonraki demoda, flex-direction: row içeren tek bir esnek öğe satırı vardır. Son öğe, esnek 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.

Flexbox'ta neden kendini haklı çıkarma seçeneği yok?

Esnek öğeler ana eksende bir grup görevi görü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. Esnek düzenlerin öğeleri grup olarak ele alma şekli nedeniyle bu özellikler esnek bağlamda uygulanmaz.

Flexbox'ın otomatik kenar boşluklarıyla çok iyi çalıştığını bilmekte fayda vardır. Bir öğeyi gruptan 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'tür. Otomatik kenar boşluğu, uygulandığı yönde tüm alanı kaplar. 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 ortalamanıza yardımcı olur. justify-content özelliği, öğeyi ana eksende hizalar. O da satır. Çapraz eksendeki align-items özelliği.

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

Öğrendiklerinizi test etme

Flexbox hakkındaki 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.
• CSS Tricks Guide to Flexbox
• Flexbox Flex Kapsayıcısı 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