Flex container nedir?
display: flex ile esnek kapsayıcıyı öğrenirsin.
Flexbox nedir?
Flexbox, öğeleri bir satır ya da sütun boyunca düzenlemenin modern yoludur. Temelinde iki rol vardır: esnek kapsayıcı (flex container) ve esnek öğe (flex item). Bir kapsayıcı, içine aldığı öğeleri yatayda ya da dikeyde hizalar.
Önce kapsayıcıyı kurmalısın: HTML'de bir öğe seçip CSS'te esnek hale getirirsin. Bundan sonra içteki tüm öğeler esnek düzenin parçası olur.
display: flex ne yapar?
Bir öğeyi esnek kapsayıcı yapmak için display: flex yazarsın. Bu tek satır, kapsayıcının iç davranışını değiştirir: çocuklar artık normal akışta değil, esnek düzende dizilir. Varsayılan olarak yan yana, soldan sağa sıralanırlar.
display: flex eklemeden hiçbir Flexbox özelliği çalışmaz; bu yüzden her Flexbox bölümü bu bildirimle başlar.
Esnek öğe nedir?
Kapsayıcının doğrudan çocukları esnek öğe (flex item) olur; torunlar bu düzenden etkilenmez. Bir ul kapsayıcıysa, içindeki li öğeleri esnek öğedir; li içindeki a değildir.
Her esnek öğe, kapsayıcının eksenleri boyunca konumlanır ve bir sonraki derste göreceğin yön bildirimiyle sıralanır. Öğelerin boyutu için ek ayarlar da ileriki derslerde gelir.
Uygulama Araç çubuğunu esnek yap
Bir .toolbar sınıf seçicisi ekle ve display: flex bildirimini yaz. Böylece araç çubuğundaki düğmeler yan yana dizilir.
Örnek çözümü göster
/* araç çubuğunu esnek yap */
.toolbar {
display: flex;
}Kendini test et
-
display: flex ne yapar?
.toolbar { display: flex; }- İçindeki çocukları esnek düzene sokar
- Yalnızca metni yatayda hizalar
- Sayfanın arka planını değiştirir
- HTML etiketlerini gizler
Cevabı göster
İçindeki çocukları esnek düzene sokar — Doğru. display: flex, kapsayıcının çocuklarını esnek düzene sokar.
-
Esnek kapsayıcı bildirimini yaz
.toolbar { ____; gap: 0.5rem; }Cevabı göster
.toolbar { display: flex; gap: 0.5rem; } -
Kavramları anlamlarıyla eşleştir
- Flex container
- Esnek kapsayıcı
- Flex item
- Esnek öğe
- display: flex
- Kapsayıcıyı esnek yapar