Bu, verilen değere bağlı olarak satır içi veya blok şeklinde bir esnek kapsayıcı tanımlar. Doğrudan altındaki tüm öğeler için esnek bir bağlam sağlar.

.container {
  display: flex; /* or inline-flex */
}

CSS sütunlarının esnek bir kapsayıcı üzerinde hiçbir etkisi olmadığını unutmayın.

flex-direction

Bu, ana ekseni belirler ve böylece esnek öğelerin esnek konteynere yerleştirilme yönünü tanımlar. Flexbox (isteğe bağlı sarmalama hariç) tek yönlü bir yerleşim konseptidir. Esnek öğelerin öncelikle yatay satırlar veya dikey sütunlar halinde yerleştirildiğini düşünün.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row(varsayılan): soldan sağa ltr; sağdan solartl
• row-reverse: sağdan sola ltr; soldan sağartl
• column: aynı, rowancak yukarıdan aşağıya
• column-reverse: aynı, row-reverseancak aşağıdan yukarıya doğru

flex-wrap

Varsayılan olarak, esnek öğeler tek bir satıra sığmaya çalışır. Bu özelliği kullanarak bunu değiştirebilir ve öğelerin gerektiği gibi satır sonuna kadar uzanmasına izin verebilirsiniz.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap(varsayılan): tüm esnek öğeler tek satırda olacaktır.
• wrapEsnek öğeler, yukarıdan aşağıya doğru birden fazla satıra yayılacaktır.
• wrap-reverseEsnek öğeler, alttan üste doğru birden fazla satıra yayılacaktır.

Burada bazı görsel örneklerflex-wrap mevcut .

flex-flow

Bu , esnek konteynerin ana ve çapraz eksenlerini birlikte tanımlayan flex-directionve özelliklerinin kısaltılmış halidir . Varsayılan değer .flex-wraprow nowrap

.container {
  flex-flow: column wrap;
}

justify-content

Bu, ana eksen boyunca hizalamayı tanımlar. Bir satırdaki tüm esnek öğeler esnek olmadığında veya esnek olsalar bile maksimum boyutlarına ulaştıklarında kalan fazla boş alanın dağıtılmasına yardımcı olur. Ayrıca, öğeler satırı aştığında hizalama ü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 esnek yönün başlangıcına doğru paketlenir.
• flex-endÜrünler, esnek yönün sonuna doğru paketlenir.
• startÜrünler yönün başlangıcına doğru paketlenir writing-mode.
• endÜrünler yönün sonuna doğru paketlenir writing-mode.
• left: Ürünler, kabın sol kenarına doğru paketlenir; eğer bu durum mantıklı değilse flex-direction, o zaman şu şekilde davranır start: .
• right: Ürünler, kabın sağ kenarına doğru paketlenir; eğer bu durum mantıklı değilse flex-direction, o zaman şu şekilde davranır end: .
• centerÖğeler çizgi boyunca ortalanmıştır.
• space-betweenÜrünler sıraya eşit olarak dağıtılmıştır; ilk ürün başlangıç çizgisinde, son ürün bitiş çizgisindedir.
• space-aroundÖğeler, etraflarında eşit boşluk bırakılarak satır boyunca eşit olarak dağıtılmıştı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 öğe, konteyner kenarına karşı bir birim boşluk bırakırken, bir sonraki öğe ile arasında iki birim boşluk bulunur, çünkü bir sonraki öğenin kendine özgü bir boşluğu vardır.
• space-evenlyÖğeler, herhangi iki öğe arasındaki boşluk (ve kenarlara olan boşluk) eşit olacak şekilde dağıtılır.

Tarayıcıların bu değerlere verdiği desteğin incelikli olduğunu unutmayın. Örneğin, space-betweenEdge'in bazı sürümlerinde hiç destek görmedi ve Chrome'da henüz start/end/left/right özellikleri yok. MDN'de ayrıntılı tablolar mevcut . En güvenli değerler flex-start, flex-end, ve ' dir center.

Bu değerlerle eşleştirebileceğiniz iki ek anahtar kelime daha vardır: safeve unsafe. Kullanımı safe, bu tür konumlandırmayı nasıl yaparsanız yapın, bir öğeyi ekran dışına (örneğin üst kısma) iterek içeriğin kaydırılamayacak şekilde görüntülenmesini (veri kaybı olarak adlandırılır) engeller.

align-items

Bu, esnek öğelerin geçerli satırdaki çapraz eksen boyunca nasıl yerleştirileceğine ilişkin varsayılan davranışı tanımlar . Bunu justify-content, çapraz eksen (ana eksene dik) için olan 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): Konteyneri tamamen dolduracak şekilde genişlet (minimum genişlik/maksimum genişliğe yine de dikkat et)
• flex-start/ start/ self-start: Öğeler çapraz eksenin başlangıcına yerleştirilir. Bunlar arasındaki fark ince olup, kurallara uymak flex-directionveya writing-modekurallara riayet etmekle ilgilidir.
• flex-end/ end/ self-end: Öğeler çapraz eksenin sonuna yerleştirilir. Fark yine ince bir ayrıntıdır ve flex-directionkurallara uymak ile writing-modekurallara uymamak arasındaki farkla ilgilidir.
• centerÖğeler çapraz eksenin ortasına yerleştirilmiştir.
• baselineÖğeler, taban çizgileri hizalanacak şekilde hizalanmıştır.

" safeVe unsafe" değiştirici anahtar kelimeleri, bu anahtar kelimelerin geri kalanıyla birlikte kullanılabilir (ancak tarayıcı desteğine dikkat edin ) ve içeriğin erişilemez hale gelmesine neden olacak şekilde öğelerin hizalanmasını önlemenize yardımcı olur.

align-content

Bu, çapraz eksende fazladan boşluk olduğunda, justify-contentana eksen içindeki tek tek öğeleri hizalamaya benzer şekilde, esnek bir kapsayıcının içindeki satırları hizalar.

Not: Bu özellik yalnızca, veya flex-wrapolarak ayarlanmış çok satırlı esnek konteynerlerde geçerlidir . Tek satırlı esnek bir konteyner (yani varsayılan değerine ayarlanmışsa ), bu özelliği yansıtmaz .wrapwrap-reverseflex-wrapno-wrapalign-content

.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ında paketlenir.
• flex-start/ start: Konteynerin başına yerleştirilen öğeler. (Daha fazla desteklenen) yönü dikkate alırken , yönü flex-startde dikkate alır .flex-directionstartwriting-mode
• flex-end/ end: Konteynerin sonuna kadar paketlenmiş ürünler. (Daha fazla destek) flex-endyönü korurken flex-direction, son kısım da yönü korur writing-mode.
• center: Konteynerin ortasına yerleştirilmiş öğeler
• space-betweenÖğeler eşit olarak dağıtılmıştır; ilk satır konteynerin başında, son satır ise sonundadır.
• space-aroundÖğeler, her satırın etrafında eşit boşluk bırakılarak eşit şekilde dağıtılmıştır.
• space-evenlyÖğeler, etraflarında eşit boşluk bırakılarak eşit şekilde dağıtılmıştır.
• stretchÇizgiler kalan boşluğu dolduracak şekilde uzanıyor.

" safeVe unsafe" değiştirici anahtar kelimeleri, bu anahtar kelimelerin geri kalanıyla birlikte kullanılabilir (ancak tarayıcı desteğine dikkat edin ) ve içeriğin erişilemez hale gelmesine neden olacak şekilde öğelerin hizalanmasını önlemenize yardımcı olur.

order

Varsayılan olarak, esnek öğeler kaynak sırasına göre düzenlenir. Ancak, bu orderözellik, esnek kapsayıcıda görünme sıralarını kontrol eder.

.item {
  order: 5; /* default is 0 */
}

Aynı öğeler orderkaynak sırasına geri döner.

flex-grow

Bu, esnek bir öğenin gerektiğinde büyüyebilme yeteneğini tanımlar. Oran görevi gören birimsiz bir değer kabul eder. Öğenin esnek konteyner içindeki mevcut alanın ne kadarını kaplaması gerektiğini belirler.

Eğer tüm öğeler flex-growolarak ayarlanmışsa 1, konteynerdeki kalan alan tüm alt öğelere eşit olarak dağıtılır. Alt öğelerden birinin değeri ise 2, o alt öğe diğerlerinin her birinin kapladığı alanın iki katını kaplar (ya da en azından bunu deneyecektir).

.item {
  flex-grow: 4; /* default 0 */
}

Negatif sayılar geçersizdir.

flex-shrink

Bu, esnek bir öğenin gerektiğinde küçülebilme özelliğini tanımlar.

.item {
  flex-shrink: 3; /* default 1 */
}

Negatif sayılar geçersizdir.

flex-basis

Bu, kalan alan dağıtılmadan önce bir öğenin varsayılan boyutunu tanımlar. Bu bir uzunluk (örneğin %20, 5rem, vb.) veya bir anahtar kelime olabilir. Anahtar autokelime, "genişlik veya yükseklik özelliğime bak" anlamına gelir (bu, main-sizekullanımdan kaldırılana kadar geçici olarak anahtar kelimeyle yapılıyordu). Anahtar kelime, "öğenin içeriğine göre boyutlandır" anlamına gelir - bu anahtar kelime henüz iyi desteklenmediğinden, test edilmesi ve kardeşleri olan , ve'nin contentne yaptığını bilmek zordur .max-contentmin-contentfit-content

.item {
  flex-basis:  | auto; /* default auto */
}

Eğer olarak ayarlanırsa 0, içeriğin etrafındaki ekstra boşluk hesaba katılmaz. Eğer olarak ayarlanırsa auto, ekstra boşluk değerine göre dağıtılır flex-grow. Bu grafiğe bakın.

flex

flex-grow, flex-shrinkBu, ve'nin birleşiminin kısaltılmış halidir flex-basis. İkinci ve üçüncü parametreler ( flex-shrinkve flex-basis) isteğe bağlıdır. Varsayılan değerdir 0 1 auto, ancak bunu tek bir sayı değeriyle ayarlarsanız, örneğin flex: 5;, bu değeri %0'a değiştirir flex-basis, yani ayarlamak gibidir flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Bireysel özellikleri ayarlamak yerine bu kısaltılmış özelliği kullanmanız önerilir . Kısaltılmış özellik, diğer değerleri akıllıca ayarlar.