Display:Flex
Herkese merhaba 🌼
Web düzeninin çoğu başlangıçta gazetelerden ve dergi makalelerinden esinlenmiştir,tüm bu display: inline, display: block, float buradan gelmektedir ve yıllar geçtikçe web düzeni, artık bir dergiye gerçekten benzemediği ve bir web sitesinin çok daha karmaşık ve çok daha etkileşimli hale geldiği ölçüde daha karmaşık hale gelmiştir.
Yıllar boyunca, bir web sitesini düzenlemek için HTML ve CSS’yi uygulamanın birçok yolu olmuştur.En eski yöntemlerden biri aslında HTML kullanmaktı.Tablo adı verilen bu şeylere sahiptik, böylece web siteniz için üç sütunlu bir düzen oluşturmak üzere tablo satırları (tr)ve tablo verileri (td) içeren bir “tablo” öğesi oluşturabiliyordunuz.
Ve bu üç sütunun genişliğini farklı miktarlara ayarlarsanız, web sayfanızı üç kutu veya kart ya da nasıl adlandırırsanız adlandırın, bu şekilde düzenleyebilirsiniz.Tablo öğesi modern web tasarımında hala çok kullanılmaktadır, ancak HTML’de yer aldığı için, yalnızca anlamsal olarak gerçekten bir tablo oluşturmaya çalıştığınızda kullanılmalıdır.Bu durumda, bunu web sitenizde kaç araba lastiği satıldığını veya Mayıs ayında kaç ziyaretçiniz olduğunu bilmiyorum gibi bazı verileri temsil etmek için kullanıyorsanız, bu muhtemelen tablo şeklindeki verilerdir ve bir tablo öğesiyle temsil edilmelidir.Ancak tabloyu yalnızca web sitenizin düzeni, stili için kullanıyorsanız, bu modern web tasarımında kesinlikle hayır anlamına gelir.Ve göreceğiniz gibi, günümüzde bunu yapmak için çok çok daha iyi araçlar var.İnsanlar düzen için tablo kullanmayı bıraktıktan sonra, daha önce incelediğimiz Display Özelliğini kullanmaya başladılar.
Örneğin, üç div’i satır içi blok(inline-block) olacak şekilde ayarlayabilirsiniz, böylece hepsi aynı satırda görünür ve ardından bunları belirli bir genişlik miktarına sahip olacak şekilde ayarlarsanız, tüm yatay için yeterli olduğu sürece, farklı sütunlarda bu şekilde yan yana dizilirler.Yine de bununla ilgili bazı sorunlar var, çünkü gördüğünüz gibi düzen harika görünmüyor, değil mi?
Mesela, neden hepsi en üstte tek bir satırda değil?Ve bunu kontrol etmek, bu blokları yukarı taşımak ve hepsini aynı hizaya getirmek için, aslında gerçekten zahmetli ve acı verici bir süreç.Ve insanlar sadece istedikleri belirli bir stile sahip olmak için bu süreçten geçtiler.
Örneğin, position: absolute kullanabilirsiniz. Böylece bu blokları HTML’nin normal akışından çıkarabilir ve bunun yerine mutlak kullanarak diğer içeriğin üzerinde yüzmelerini sağlayabilirsiniz ve ardından mutlak ile elbette soldan ne kadar gitmesini istediğinizi ayarlayabilirsiniz.Ve bu şekilde nispeten karmaşık bir düzen kurabilirsiniz, ancak bu çok esnek olmayan bir düzendir, çünkü buna mutlak olmayan, örneğin altta başka bir şey eklenir eklenmez, doğru düzeni elde etmek için onunla uğraşmanız gerekecektir.Ve bu gerçekten duyarlı değil ve harika bir fikir değil.Ancak başka araçlarımız da var ve 2005–2010 döneminde en çok güvenilen araçlardan biri float kullanmaktı ve gördüğümüz gibi float, metni etrafına sarmak için görüntüleri yüzdürmek için çok kullanışlı bir araçtır, ancak insanlar float’ı aslında daha karmaşık düzenler oluşturmak için de kullanabileceğinizi fark ettiler.Örneğin, bunların üçünü de yan yana dizilecek şekilde sola doğru yüzer hale getirebiliriz.
Alternatif olarak, sağda bir şey yapabiliriz, sağa kayar ve sola kayar bir şey yapabiliriz ve daha önce gördüğünüz gibi, bir altbilgiyi temizleyebilir ve temelde daha karmaşık bir düzen oluşturmak için float ve clear kullanabiliriz.
Float, metni etrafına sarmak için bir görüntüyü bir metin bloğunun soluna veya sağına kaydırmak istediğinizde harikadır,ancak floatları düzen için kullanmayın. Bunun yerine Flexbox,Grid, Bootstrap gibi genel bir sayfa yapısı oluşturmak için özel olarak tasarlanmış başka bir şey kullanın.Ve bu blokların her birinde float ve clear kullanmaya devam edebilirsiniz, ancak bu aracın orijinal amacına sadık kalıyoruz ve Flexbox’ın kullanımı da inanılmaz derecede kolay olduğu için herhangi bir çılgın hack yapmıyoruz. Flexbox ile tüm bu farklı hileleri ve farklı hack’leri kullanarak arzuladığımız düzeni oluşturmak için tek yapmanız gereken div’lerinizi bir konteynerin içine sarmak ve ardından CSS’nizde bu konteyneri hedeflemek ve ekranı “flex” olarak ayarlamaktır.
Hepsi bu kadar.
Get Merve Nur Çifci’s stories in your inbox
Join Medium for free to get updates from this writer.
Tek yapmanız gereken, modern bir web sitesinde beklediğiniz gibi, bu şekilde sütunlar halinde görüntülenmelerini sağlamaktır.Ayrıca, bu öğelerin her biri arasına bir boşluk ekleyebileceğiniz “boşluk” gibi harika ek özelliklere de sahiptir ve bu modülde ele alacağımız çok daha fazlası var ve web sitemizde daha karmaşık düzenler oluşturmak için Flexbox’ı kullanmanın ne kadar esnek ve kolay olduğunu göreceksiniz Şimdi, bu aşamada fark edebileceğiniz şeylerden biri, bu flex’in Display özelliğine ayarlanmış olmasıdır ve daha önce display: inline, display: block, display: inline-block ve bunların hepsine ve display: none’a baktığımızı biliyoruz Bu özel seti, tamamen farklı bir sistem olarak düşünmenizi istiyorum.Flexbox hakkında düşünürken, tüm bunları pencereden dışarı atmamız gerekiyor.
Bu onu kullanmayacağımız anlamına gelmiyor, çünkü gördüğünüz gibi web siteleri hala bu farklı şeyleri kullanmaya devam ediyor, ancak bir şeyi esnek hale getirdiğinizde, artık bu kuralların hiçbirine uymuyor.Bunun yerine, farklı kuralları olan farklı bir sistem ve bunu öğrenmemiz ve ayrı bir varlık olarak düşünmemiz gerekiyor.Ve esasen bir şeyi display: flex olarak bildirdiğimizde olan şey, içeriğimizi makul ve yaygın olarak istenen bir şekilde düzenlemek için Flexbox’a biraz kontrol vermemizdir, ancak tam olarak istediğimiz düzeni elde etmek için ince ayar yapmak için tüm bu farklı değiştiricilere sahibiz.
Tekrarlamak gerekirse, daha önce farklı öğelerin varsayılan olarak farklı görüntüleme değerlerine sahip olduğundan bahsettiğimizi hatırlayın,bir div varsayılan olarak tam genişlikte blok olacaktır.Bir span varsayılan olarak satır içi bir öğe olacaktır.(inline) Flexbox kullandığınızda ve görüntülemek istediğiniz tüm öğeleri esnek bir kapsayıcı içine aldığınızda, önceki tüm bu görüntüleme değerleri yok sayılacak ve bunun yerine her şey Flexbox tarafından düzenlenecektir. Ve Flexbox içindeki her bir öğenin genişliği normalde içerik boyutuna bağlı olacaktır.
Böylece tüm içeriğinizin tek bir satırda görüntülenmesini sağlamaya çalışacaktır.Flexbox’ın içinde ne tür bir öğe olduğu önemli değildir, Flexbox kurallarını her birine uygulayacaktır. Gördüğümüz gibi, boşluk eklemek için boşluk adlı özelliği kullanabiliriz.Örneğin, bunu 10 piksel olarak ayarlayabilirsiniz, bu da oldukça statik olacaktır
Varsayılan olarak, bir kapsayıcıyı display: flex olarak bildirdiğinizde, aslında aşağı yukarı bir blok öğesi gibi olacak bir kapsayıcı oluşturacaktır.%100 tam genişlikte olacak.Ancak, kapsayıcıyı display: flex olarak ayarlamak yerine, aslında display: inline-flex olarak ayarlayabileceğiniz bir şey de var ve inline-block’a benzer şekilde, yaptığı şey bu Flexbox’ın ihtiyaç duyduğu kadar yer kaplamasına izin vermek, ancak başka şeylerin de aynı satırı işgal edebileceği anlamına geliyor.
Yani bu, bir Flexbox konteyneri oluşturmanın iki farklı versiyonudur.
Bu resmi bir gezinme çubuğuna(navbar) dönüştürmenizi istiyorum.Bu yüzden her şeyin yatayda olmasını istiyorum.Hedef resmin içine bakarsanız, aradığınız şeyin bu olduğunu görürsünüz.
Yani tüm bu şeylerin bu şekilde ortaya çıkmasını istiyorsunuz.Aralarında bir boşluk olmasını istersiniz.Bu boşluğun ne kadar büyük olmasını istediğinizi ayarlayabilirsiniz, ancak esasen aradığınız sonuç budur.ve bunu Flexbox kullanarak yapmanızı istiyorum.Kod aşağıdaki gibi olur.
KAYNAK:
https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37368230#questions
