Flexbox - Genel Bakış
Cyükselen Style Sheets (CSS), web sayfalarını sunum yapılabilir hale getirme sürecini basitleştirmeyi amaçlayan basit bir tasarım dilidir. CSS, bir web sayfasının görünümünü ve hissini işler.
CSS kullanarak, metnin rengini, yazı tiplerinin stilini, paragraflar arasındaki boşluğu, sütunların nasıl boyutlandırıldığını ve yerleştirildiğini, hangi arka plan görüntülerinin veya renklerinin kullanıldığını, yerleşim tasarımlarını, farklı cihazlar ve ekran boyutları için ekrandaki varyasyonları kontrol edebilirsiniz. yanı sıra çeşitli diğer efektler.
Kutuların konumunu ve boyutlarını belirlemek için CSS'de mevcut düzen modlarından birini kullanabilirsiniz -
The block layout - Bu mod, belgelerin düzenlenmesinde kullanılır.
The inline layout - Bu mod, metin düzeninde kullanılır.
The table layout - Bu mod, tabloların düzenlenmesinde kullanılır.
The table layout - Bu mod, elemanların konumlandırılmasında kullanılır.
Tüm bu modlar belgeler, metinler, tablolar vb. Gibi belirli öğeleri hizalamak için kullanılır, ancak bunların hiçbiri karmaşık web sitelerini düzenlemek için eksiksiz bir çözüm sağlamaz. Başlangıçta bu, yüzen öğeler, konumlandırılmış öğeler ve tablo düzeninin (genellikle) bir kombinasyonu kullanılarak yapılır. Ancak şamandıralar yalnızca kutuları yatay olarak konumlandırmaya izin verir.
Flexbox nedir?
Yukarıda belirtilen modlara ek olarak, CSS3, genellikle olarak adlandırılan başka bir Esnek Kutu düzen modu sağlar. Flexbox.
Bu modu kullanarak, karmaşık uygulamalar ve web sayfaları için kolayca düzenler oluşturabilirsiniz. Floatların aksine Flexbox düzeni, kutuların yönü, hizalaması, düzeni ve boyutu üzerinde tam kontrol sağlar.
Flexbox'ın Özellikleri
Aşağıda Flexbox düzeninin dikkate değer özellikleri verilmiştir -
Direction - Bir web sayfasındaki öğeleri soldan sağa, sağdan sola, yukarıdan aşağıya ve aşağıdan yukarıya gibi herhangi bir yönde düzenleyebilirsiniz.
Order - Flexbox'ı kullanarak bir web sayfasının içeriğinin sırasını yeniden düzenleyebilirsiniz.
Wrap - Bir web sayfasının içeriği için tutarsız alan olması durumunda (tek satırda), bunları birden çok satıra (hem yatay) hem de dikey olarak sarabilirsiniz.
Alignment - Flexbox'ı kullanarak, web sayfasının içeriğini konteynerlerine göre hizalayabilirsiniz.
Resize - Flexbox'ı kullanarak sayfadaki öğelerin boyutunu mevcut alana sığacak şekilde artırabilir veya azaltabilirsiniz.
Destekleyici tarayıcılar
Aşağıda Flexbox'ı destekleyen tarayıcılar verilmiştir.
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+
- Android 4.4+
- iOS 7.1+