Flexbox (CSS Esnek Kutu Düzeni), bir kapsayıcıdaki (flex kapsayıcı olarak adlandırılır) öğeleri esnek bir şekilde düzenlemenin bir yoludur. Kapsayıcı içindeki öğeler (flex öğeler olarak adlandırılır), belirtilen düzeni ve aralığı korurken kapsayıcı alanını optimize etmek için büyüyebilir veya küçülebilir. Flexbox'u özellikle farklı boyutlardaki öğeleri satırlar veya sütunlar halinde hizalamak isterken, küçük öğelerden daha fazla yer kaplayan büyük öğeler olduğunda yararlı bulabilirsiniz.
Flexbox ayarları
Flexbox ayarlarını Duyarlı panelinin Flexbox sekmesinde bulabilirsiniz.
Flexbox'u kullan
Flexbox'u kullanmak için Flexbox'u kullan onay kutusunu işaretleyin. Mevcut üst öğe, flex kapsayıcı olur ve flexbox özellikleri Duyarlı panelinde kullanılabilir hale gelir.
Flexbox aşağıdaki durumlarda kullanılamaz:
- Geçerli üst öğe bir metin öğesi olduğunda. Örneğin:
<p>veya<h1>. - Mevcut üst öğe, satır içi öğeler içerdiğinde. Örneğin:
<span>veya<a>. Bu, üst öğe bir sayfaysa geçerli değildir.
Flex kapsayıcının doğrudan alt öğeleri, flex öğeler olur. (Kılavuz çizgi katmanları hariç tutulur.) Flex öğeler, ana eksen boyunca düzenlenir ve bu eksen, yatay veya dikey olarak ayarlanabilir. Ayrıca, içeriğin eksen boyunca aktığı yönü de yapılandırabilirsiniz. Flexbox yönü değiştirilebildiğinden özellikler üst, alt, sol veya sağ yerine "flex başı" ve "flex sonu" gibi değerlere ayarlanır.
Yön
Yön, ana eksen ile eksen boyunca akış yönünü ayarlayarak flex öğelerin nasıl düzenleneceğini belirler.
| Yön | Davranış | Ana eksen |
|---|---|---|
| satır | Flex öğeler, metin akışı yönünde satırlar halinde düzenlenir (İngilizce gibi soldan sağa diller için soldan başlayarak). |
Yatay |
| ters satır | Flex öğeler, metin akışının tersi yönde satırlar halinde düzenlenir (İngilizce gibi soldan sağa diller için sağdan başlayarak). |
Yatay |
| sütun | Flex öğeler, içerik akışı yönünde (genellikle üstten başlayarak) sütunlar halinde düzenlenir. |
Dikey |
| ters sütun | Flex öğeler, içerik akışının tersi yönde (genellikle alttan başlayarak) sütunlar halinde düzenlenir. |
Dikey |
Aralık bırakma
Aralık ayarı, flex öğeler arasındaki aralıkların otomatik olarak mı yoksa sabit mesafelerle mi düzenleneceğini belirler.
| Aralık bırakma | Davranış |
|---|---|
| Standart | Flex öğeler belirtilmiş olan yaslama, sarmalama ve hizalama ayarlarına göre flex kapsayıcıda otomatik olarak düzenlenir. |
| Sabit | Flex öğeler, belirtilen alt aralık ve sınır aralığı değerlerine göre düzenlenir. |
İki yana yaslama
Yaslama ayarı, flex öğelerin ana eksen boyunca nasıl düzenleneceğini belirler. Bu ayar standart boşluk ayarıyla kullanılabilir.
| İki yana yaslama | Davranış |
|---|---|
| flex başı | Flex öğeler satır veya sütunun başına yerleştirilir. |
| flex sonu | Flex öğeler satır veya sütunun sonuna yerleştirilir. |
| merkez | Flex öğeler ana eksen üzerinde ortalanır. |
| ara boşluklu | Flex öğeler, ana eksen boyunca, başlangıç ve bitiş öğeleri kapsayıcının kenarlarında olacak şekilde eşit aralıklarla yerleştirilir. |
| çevre boşluklu | Flex öğeler, ana eksen boyunca eşit aralıklarla yerleştirilir ve her iki uçta ara boşluğun yarısı kadar boşluk bırakılır. |
| eşit boşluklu | Flex öğeler, ana eksen boyunca başlangıç ve bitiş öğelerinin her iki tarafında da aynı ölçüde boşluk bırakılarak eşit aralıklarla yerleştirilir. |
Çapraz eksen hizalama
Çapraz eksen hizalama, flex öğelerin mevcut satır veya sütunun çapraz ekseni boyunca düzenlenmesidir.
| Çapraz eksen hizalama | Davranış |
|---|---|
| flex başı | Flex öğeler, çapraz eksenin başlangıç kenarına yerleştirilir. |
| flex sonu | Flex öğeler, çapraz eksenin sonuna yerleştirilir. |
| merkez | Flex öğeler, çapraz eksen boyunca ortalanır. |
| esneme | Flex öğeler, çapraz eksendeki kullanılabilir alanı dolduracak şekilde esnetilir. |
| referans değer | Flex öğeler, referans değerleri hizalanacak şekilde çapraz eksen üzerine yerleştirilir. |
Sarmalama
Sarmalama, içeriğin kapsayıcı içinde sarmalanıp sarmalanmayacağını belirler. Bu ayar standart boşluk ayarıyla kullanılabilir.
| Sarmalama | Davranış |
|---|---|
| kaydırma yok | Flex öğeler tek bir satır veya sütunda düzenlenir. |
| sarmalama | Flex öğeler tek bir satıra sığmayacak kadar büyük olduğunda birden çok satır veya sütun oluşturacak şekilde sarmalanabilir. |
| ters sarmalama | Flex öğeler tek bir satıra sığmayacak kadar büyük olduğunda birden çok satır veya sütun oluşturacak şekilde sarmalanabilir. Çapraz eksen yönü tersine çevrilir. |
Kaydırma hizalama
Sarma hizalama, flex kapsayıcısında birden fazla satır veya sütun varsa satırların ya da sütunların çapraz eksen boyunca (ana eksene diktir) nasıl düzenleneceğini belirler. Bu ayar, standart boşluk ve sarmalama etkin durumda olduğunda kullanılabilir.
| Kaydırma hizalama | Davranış |
|---|---|
| flex başı | Satırlar veya sütunlar, kapsayıcının başlangıç kenarına yerleştirilir. |
| flex sonu | Satırlar veya sütunlar, kapsayıcının sonuna yerleştirilir. |
| merkez | Satırlar veya sütunlar, çapraz eksen üzerinde ortalanır. |
| esneme | Yüksekliği tanımlı olmayan satırlar veya sütunlar, çapraz eksendeki kullanılabilir alanı dolduracak şekilde esnetilir. |
| ara boşluklu | Satırlar veya sütunlar, kapsayıcının kenarlarında başlangıç ve bitiş satırları ya da sütunları olacak şekilde çapraz eksen üzerinde eşit şekilde yerleştirilir. |
| çevre boşluklu | Satırlar veya sütunlar, çapraz eksen boyunca eşit aralıklarla yerleştirilir ve her iki uçta bu aralığın yarısı kadar boşluk bırakılır. |
Alt öğe aralığı
Flex kapsayıcıda iki öğe arasında piksel cinsinden bırakılan mesafedir. Bu ayar, sabit aralık ayarıyla kullanılabilir.
Kenar aralığı
Dış öğeler ile flex kapsayıcı arasında piksel cinsinden bırakılan mesafe. Bu ayar, sabit aralık ayarıyla kullanılabilir.
Alt öğe sıralaması
Flexbox'taki öğeler burada listelenir. Yeniden sıralamak istediğiniz öğeleri listedeki yeni konumlarına sürükleyin.
Ayrıca, flex öğeleri sahnede taşıyarak da sıralarını değiştirebilirsiniz.
Flexbox alt öğe özellikleri
Flex öğelerin kendi özellikleri vardır. Flexbox ayarlarını görüntülemek ve düzenlemek için alt öğeyi seçin.
Flex öğeler boyut olarak büyüyüp küçülebilse de minimum ve maksimum genişliklere ve yüksekliklere uyarlar. Flex öğeler flexbox ayarlarına göre düzenlendiğinden sol ve üst özellikleri devre dışıdır ancak hareket ettirme özellikleri kullanılarak bu öğelerin konumları düzenlenebilir.
Çapraz eksen hizalama
Flex öğenin eksenler arası hizalaması, kapsayıcı için ayarlanan varsayılan çapraz eksen hizalamasını geçersiz kılar.
| Çapraz eksen hizalama | Davranış |
|---|---|
| otomatik | Flex öğe, flex kapsayıcının çapraz eksen hizalama ayarını kullanır. |
| referans değer | Flex öğenin referans değeri, referans hizalama üzerinden diğer flex öğelerin referans değerleriyle hizalanır. |
| merkez | Flex öğe, çapraz eksende ortalanır. |
| flex sonu | Flex öğe, kapsayıcının bitiminde çapraz eksen boyunca konumlandırılır. |
| flex başı | Flex öğe, kapsayıcının başında çapraz eksen boyunca konumlandırılır. |
| esneme | Yüksekliği tanımlı olmayan flex öğeler kapsayıcıyı dolduracak şekilde çapraz eksen üzerinde esnetilir. |
Flex büyüme
Flex büyüme faktörü, bir flex öğenin aynı satır ya da sütun üzerindeki diğer öğelerin flex büyüme faktörleriyle orantılı olarak, flex kapsayıcının kullanılabilir alanını dolduracak şekilde ana eksen boyunca ne kadar büyüyeceğini belirler. Bu ayar standart boşluk ayarıyla kullanılabilir.
Örneğin, bir satırda flex büyüme faktörleri 1, 1 ve 2 olan üç flex öğe varsa son flex öğe, satırdaki kullanılabilir alanda diğer flex öğelerin her birine göre iki kat fazla yer kaplar.
Bir satır veya sütundaki öğelerin tüm flex büyüme faktörlerinin toplamı 1'den küçükse flex öğeler kullanılabilir alanın tamamını kullanmayabilir.
Flex büyüme faktörü 0 olan flex öğeler büyümez.
Flex küçülme
Flex küçülme faktörü, bir flex öğenin aynı satır ya da sütundaki diğer öğelerin flex küçülme faktörleriyle orantılı olarak, flex kapsayıcıya sığmak üzere ana eksen üzerinde ne kadar küçüleceğini belirler. Bu ayar standart boşluk ayarıyla kullanılabilir.
Örneğin, bir satırda flex küçülme faktörleri 1, 1 ve 2 olan üç flex öğe varsa son flex öğe, diğer flex öğelere göre daha fazla küçülür. Flex küçülme faktörleri, flex öğenin boyutunu dikkate alır.
Flex küçülme faktörü 0 olan flex öğeler küçülmez.