Flexbox

CSS Podcast'i - 010: Flexbox 'nı inceleyin.

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üzeni Modeli (flexbox), tek boyutlu içerik için tasarlanmış bir düzen modelidir. Farklı ebatlarda, farklı ebatlarda, farklı bedenlerde bu öğeler için en iyi düzeni döndürebilirsiniz.

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ının izlemesi için kesin boyutlar ayarlamak yerine, flexbox ile bunun yerine içeriğin nasıl görünebileceğ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: Bu kılavuzda inceleyebileceksiniz.

• 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 görsel olarak yeniden sıralanabilir, DOM'deki sıralarının dışına çıkırsınız.
• 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.
• Öğ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 yer alır. column ise ana ekseniniz sütun boyunca yer alır.

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

Çapraz eksen, ana eksenin diğer yönde uzanır. Yani flex-direction, row ise çapraz eksen sütun boyunca uzanır.

Çapraz eksende iki şey yapabilirsiniz. Öğeleri tek tek veya grup olarak taşıyabilirsiniz. Böylece öğeler esnek yapıya ve birbirlerine göre hizalanır. emin olun. 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. Tüm bunların pratikte nasıl işlediğini bu kılavuz boyunca göreceksiniz. Şimdilik, ana eksenin flex-direction öğenizi takip ettiğini unutmayın.

Esnek kapsayıcı oluşturma

Farklı boyutlardaki öğelerden oluşan bir grup alıp yerleştirmek için flexbox'ı kullanarak flexbox'ın nasıl davrandığını görelim gözden geçirelim.

<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, display özelliğinin değerini flex olarak değiştirerek yapın.

.container {
  display: flex;
}

Düzen kılavuzunda öğrendiğiniz üzere bu size blok seviyesinde bir kutu sağlar. Esnek öğe alt öğeleri de var. Esnek öğeler, başlangıç değerlerini kullanarak hemen bir flexbox davranışı sergilemeye başlar.

Not: Tüm CSS mülklerinin "kullanıma hazır" davranışlarını kontrol eden başlangıç değerleri vardır ilk davranışı değiştirmek için herhangi bir CSS uygulamamış olmanız gerekir. Esnek kapsayıcımızın alt öğeleri, üst öğeleri display: flex alır almaz Esnek öğeler haline gelir. Dolayısıyla bu ilk değerler, bazı flexbox davranışı görmeye başladığımız anlamına gelir.

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 sıra halinde düzenlenir.
• row-reverse: öğeler esnek kapsayıcının sonundan bir satır olarak yerleştirilir.
• column: Öğeler sütun olarak 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.

Öğelerin akışını ve erişilebilirliği tersine çevirme

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 bunun için 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 okuyacağı sıra olduğu için bu hususun anlaşılması önemlidir içerik, ve klavyeyi kullanarak gezinen herkes onu izler.

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, yeniden sıralama her işlemde, sitenizi iyi hale getirmeyeceğini kontrol etmek için kapsamlı testler yapılmalıdır. bazı insanlar için çok zor.

Daha fazla bilgi için:

• İçerikleri yeniden sıralama
• Flexbox ve klavyeyle gezinme bağlantısı kesilir

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. Bu, Arapça dilinde çalışıyorsanız komut dosyası yönü sağdan sola (rtl) ise öğeler sağda sıralanır. Cümleler Arapçada okunduğu için sekme sırası sağda başlar.

Dikey yazma moduyla çalışıyorsanız gibi, bazı Japonca yazı tiplerinde de olduğu gibi, dikey olarak yukarıdan aşağıya bir satır gösterilir. Dikey yazma modu kullanan bu demoda flex-direction değiştirmeyi deneyin.

Bu nedenle, esnek öğelerin varsayılan olarak çalışma şekli 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, esnek öğelerin solda hizalandığını ve yatay olarak çalıştığını varsaymayı kolaylaştırır.

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ıcı ve sonu vardır. Ana eksenin başlangıcı ana-başlangıç olarak adlandırılır. Esnek öğelerimiz ilk başta en başta 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 özelliğinin ilk değeri nowrap. Bu, kapsayıcıda yeterli alan yoksa öğelerin taşacağı anlamına gelir.

Minimum içerik boyutuna ulaştıklarında esnek öğeler, kapsayıcılarında taşmaya başlar

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 esnek kapsayıcı sarmalandığında birden fazla esnek çizgi oluşturulur. Alan dağılımı açısından bakıldığında, her satır yeni bir esnek kapsayıcı görevi görür. Dolayısıyla, satırları sarmalıyorsanız 2. satırdaki bir öğenin, 1. satırda onun üzerindeki bir öğeyle hizalanması mümkün değildir. Flexbox'ın tek boyutlu olması burada kastedilen budur. Hizalamayı bir eksende, satır veya sütunda kontrol edebilirsiniz. tıpkı çizelgede yapabildiğimiz gibi.

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 öğ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 ilk 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 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 metriğinden daha büyük şekilde büyüyebilir.
• flex-shrink: 1: Öğeler flex-basis değerine göre daha az küçülebilir.
• flex-basis: auto: Öğelerin temel boyutu auto.

flex: auto kullanılması, öğelerin farklı bedenlere sahip olacağı anlamına gelir Bunun nedeni, öğeler arasında paylaşılan alan, her bir öğe olarak düzenlendikten sonra maks. içerik boyutu Dolayısıyla, büyük bir öğe daha fazla alan kazanacaktır. Tüm öğeleri tutarlı bir boyutta olmaya zorlamak ve içerik değişikliğinin boyutunu yoksaymak için Demoda flex:auto - flex: 1.

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

• flex-grow: 1: Öğeler flex-basis metriğinden daha büyük şekilde büyüyebilir.
• 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 öğeler flex-grow oranında 1 oranına sahip olduğundan öğelerin hepsi eşit olarak büyür ve alan eşit şekilde paylaştırılır.

Not: Ayrıca size büyümeyen veya küçülmeyen esnek olmayan esnek öğeler sunan flex: none değeri de vardır. Bu, hizalama özelliklerine erişmek için yalnızca flexbox'ı kullanıyorsanız ancak herhangi bir esnek davranış istemiyorsanız yararlı olabilir.

Öğ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 uygulayabilirsiniz. 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 verilir, ikinci kısmı, üçte oluşturuyoruz.

Aynı şeyi auto öğesinin flex-basis öğesi için de yapabilirsiniz, ancak üç nokta belirtmeniz gerekir değerler. İlk değer flex-grow, ikinci flex-shrink, ve üçüncü flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

Bu, auto için flex-basis kullanılması nedeniyle daha az yaygın bir kullanım alanıdır. tarayıcının alan dağılımını belirlemesine izin vermektir. Bir öğenin algoritmanın karar verdiğinden biraz daha fazla büyümesini sağlamak isterseniz faydalı olur.

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 yerleştirilmiştir, en düşük değerlere öncelik verin. 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.

ziyaret edin.

Uyarı: order özelliğinin kullanılması, flex-direction öğesinin row-reverse ve column-reverse değerleriyle aynı sorunlara sahiptir. Bazı kullanıcılar için bağlantısız bir deneyim oluşturmak çok kolay olurdu. Dokümandaki sırası hatalı olan öğeleri düzelttiğiniz için order öğesini kullanmayın. Öğelerin mantıksal olarak farklı bir sırada olması gerekiyorsa HTML'nizi değiştirin!

Öğrendiklerinizi sınayın

Flexbox bilginizi test edin

Varsayılan flex-direction

row

Flexbox, varsayılan olarak öğeleri bir satıra sığdırarak başlangıçta hizalar. Sarmalama etkinken alt öğelerin akışı için satırlar oluşturmaya devam eder.

column

Esnek yönü sütuna ayarlamak, öğeleri gruplandırmak için harika bir yöntemdir, ancak varsayılan değer değildir.

Varsayılan olarak, bir esnek kapsayıcı alt öğeleri sarmalar.

true

Sarmalama etkinleştirilmelidir.

false

Alt öğeleri sarmalamak için flex-wrap: wrap öğesini display: flex ile kullanın

Bir esnek alt öğe sıkışık görünür. Hangi esnek özellik bunu azaltmaya yardımcı olur?

flex-grow

Bu özellik, öğelerin temel boyutun üzerinde büyüyüp büyümeyeceğini açıklar, temelde nasıl davranması gerektiğini açıklamaz.

flex-shrink

Evet, bu özellikte, genişlik temelin altına düşüyorsa boyutlandırmanın nasıl ele alınacağı açıklanır.

flex-basis

Bu, boyutlandırmanın başlangıç noktasını sağlar, ancak genişliğin baskılı senaryoda olduğu gibi temelin altında olduğu boyutlandırma senaryolarıyla başa çıkma yöntemi değildir.

Flexbox hizalamasına genel bakış

Flexbox, öğeleri uyumlu hale getirmek ve öğeler arasında alan dağıtmak için bir dizi özellik sundu. Bu özellikler o kadar yararlı oldu ki artık kendi spesifikasyonlarına taşındılar. bunlarla Izgara Düzeni'nde de karşılaşırsınız. Burada, flexbox'ı kullanırken bunların nasıl çalıştığını görebilirsiniz.

Özellik grubu iki gruba yerleştirilebilir. Alan dağılımı ve hizalama için özellikler. Alanı dağıtan özellikler şunlardır:

• justify-content: Ana eksendeki alan dağılımı.
• align-content: Çapraz eksende alan dağılımı.
• place-content: Yukarıdaki özelliklerin 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 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, esnek öğeler satır olarak düzenlenmiştir ve ana eksende alan vardır. Öğeler esnek kapsayıcıyı tamamen dolduracak kadar büyük değil. İlk değeri justify-content olduğundan öğeler esnek kapsayıcının başlangıcında hizalanıyor flex-start. Öğeler başta sıralanır, fazladan boşluklar ise sondadır.

justify-content özelliğini esnek kapsayıcıya ekleyin. flex-end değerini girelim. öğeler, kapsayıcının sonunda sıralanır ve boş alan başa yerleştirilir.

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

Ayrıca, justify-content: space-between kullanarak öğ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.

ziyaret edin.

Not: justify-content mülkünün herhangi bir işlem yapabilmesi için ana eksendeki kapsayıcınızda boş alan olması gerekir. Öğeleriniz ekseni dolduruyorsa, paylaşılacak alan kalmaz ve mülk hiçbir şey yapmaz.

flex-direction: column ile

flex-direction ayarını column olarak değiştirdiyseniz justify-content şunun üzerinde çalışır: sütun. 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 flexbox sütun düzeniyle farklı değerleri 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 öğesinin aksine, align-content ilk değeri stretch. 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 öğeler, ve kapsayıcıda block-size var.

place-content sloganı

Hem justify-content hem de align-content ayarlarını yapmak için place-content öğesini birle kullanabilirsiniz veya iki değer ekleyebilirsiniz. Her iki eksen için de tek bir değer kullanılır. Birincisi align-content, ikincisi de justify-content için 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 kullanarak öğelerinizi esnek çizgi içinde hizalayabilirsiniz ve align-self. 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 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, 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 özelliği, esnek kapsayıcıya uygulanabilir olarak ayarlamanız gerekir.align-self

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

Bir sonraki demoda, çarpı üzerindeki tüm öğeleri hizalamak için align-items değerini değiştirmeyi deneyin eksenini grup olarak değiştirebilirsiniz.

Flexbox'ta neden kendini haklı çıkarma seçeneğ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ışır o eksendeki öğelerin hizalamasını yapmak için kullanılı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 gerektiğinde veya grubu iki gruba ayırın. Bunun 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 durum, öğeyi sağa ittiği ve dolayısıyla 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 ö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;
}

Not: Gelecekte bu hizalamayı üst öğeyi esnek kapsayıcı yapmaya gerek kalmadan yapabiliriz. Hizalama özellikleri, blok ve satır içi düzen için belirtilir. Şu an için hiçbir tarayıcı bunları uygulamamıştır. Ancak esnek biçimlendirme bağlamına geçmek özelliklere erişmenizi sağlar. Bir şeyi hizalamanız gerekiyorsa bunu yapmak için harika bir yöntemdir.

Öğrendiklerinizi sınayın

Flexbox bilginizi test edin

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

Flexbox ile dikey olarak hizalamak için

anahtar kelimeleri hizala

Güzel

anahtar kelimeleri iki yana yaslar

Üzgünüz

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

Flexbox ile yatay olarak hizalamak için

anahtar kelimeleri hizala

Üzgünüz

anahtar kelimeleri iki yana yaslar

Güzel

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

Esnek öğeler varsayılan olarak stretch ile hizalanır. İçerik istiyorsanız beden seçeneği olarak, aşağıdaki stillerden hangisini kullanırsınız?

justify-content: flex-start

İki yana yaslama özelliği dikey değil, yatay hizalama içindir.

align-content: start

content, alt öğe hizalamasını değil, esnek çizgileri hizalar.

height: auto

Bunun herhangi bir etkisi olmaz.

align-items: flex-start

Evet, "üst"e dikey olarak hizalamak istiyoruz veya "start"ı seçin. Bu işlem, varsayılan uzatma değerini kaldırır ve bunun yerine içerik yüksekliğini kullanır.

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