Flexbox CSS ve HTML'de (Öğretici) - duyarlı düzenler geliştirme

CSS ve HTML'de Flexbox kursunda seni neler bekliyor.

Flexbox düzeni nedir ve neden kullanılmalı?

Burada proje başlatılır, daha sonra çalışmaya devam edilir.

Burada VS-Code ile entegre edilmiş MS Edge araçlarıyla örnek yapının ve hata ayıklama imkanlarının nasıl olduğunu göstereceğim. Ayrıca bu videoda ilk kez Flexbox düzeni aktif hale getirilip yönü ayarlanacak.

Esnek kutu düzeninde bir alanı nasıl eşit veya belirli oranlarda bölüştürebilirim?

Biraz temel matematikten kaçamayacağınız küçük bir egzersiz.

İşte genişliğe duyarlı olarak uyum sağlayan iki kenar çubuklu yatay bir düzen sunuyorum.

Flex konteynerinden çocuk öğeleri yatay eksende hizalanabilir. İşte nasıl ayarlanacağını gösteriyorum.

Yalnızca konteynerde değil, align-self ile tek elemanlarda da farklı şekilde hizalama yapabilirsiniz.

Bir zar ile bireysel hizalamaya yönelik küçük bir egzersiz.

Bir Flex konteynerinde sadece çapraz eksen boyunca hizalayabileceğiniz değil, aynı zamanda ana eksen boyunca da hizalamayı birçok şekilde ayarlayabilirsiniz. ;-)

Bir küçük örnek, yaygın bir düzen için ana eksene göre hizalamayı çok iyi şekilde nasıl kullanabileceğimizi gösteriyor.

Esnedik olmak isteyen kişi, çocuk öğelerinin boyutunu belirli genişlik veya yükseklikten bağımsız olarak belirleyebilmelidir. Neyse ki, bunu başarmanızı sağlayan flex-basis-özelliği var. flex-direction değiştirildiğinde, genişlik yüksekliğe dönüşür ve tersi. 

Eğer mevcut olan boşluktan daha fazla ise bir öğe ne kadar büyümelidir? Bu, flex-grow ile özelleştirilebilir.

Bir öğe, flex-basis tarafından belirtildiği kadar yer olmadığında ne kadar küçülmelidir? Bu, flex-shrink ile özel olarak ayarlanabilir. 

Alt öğeler sadece daha az alan olduğunda küçülebilir, aynı zamanda konteynırdan da taşınabilirler. Bunu flex-wrap ile nasıl kontrol edeceğinizi bu videoda göstereceğim.

flex-direction ve flex-wrap, flex-flow özelliğinde birleştirilebilir. Bu, sadece flex-direction belirtmek istendiğinde bile anlamlı olabilir çünkü flex-flow daha kısa bir yazım şeklidir. ;-)

flex-wrap ile ilgili bir görev.

Ara sıra mesafe gereklidir, insan gözünü gereksiz yere rahatsız etmemek için. Neyse ki, Flex Container'ın çocuk elemanlarında tam olarak bunu sağlayan bir CSS özelliği olan gap mevcuttur.

Düzen olmalı, özellikle Web arayüzlerinde, çünkü bunlar iyi kullanılabilir olmalıdır. Sıra bazen ayrıca belirlenmelidir, DOM'daki öğeleri taşımadan. Bu amaçla, order CSS özelliği oldukça uygun ve görünür öğelerin sırasını kolayca değiştirebilirsiniz.

Deneyelim bakalım, sıralama konusunu anladınız mı. Burada aynı sonucu elde etmenin başka bir yolu daha var, ama bu konuda eminim siz de anlayacaksınız.

Çok sık görülen bir durumdur ki, öğeleri ve özellikle metinleri yatay ve dikey olarak (!) merkezlemek istersiniz. Flexbox öncesi bir baş ağrısı olan şey, Flexbox ile çocuk oyuncağı haline geldi.

Kim tanımıyor ki onu, 3-sütunu? Eğer bu, mevcut alana uyum sağlarsa, duyarlı tasarıma çok az kalmış demektir.

Form olmadan web siteleri var mı? Evet, varsa çok azdır. Bu yüzden bunları düzgün bir şekilde düzenlemek çok önemlidir, neyse ki bu, Flexbox ile sorun değildir.

Çok sık ​​şekilde iç içe geçmiş düzenlerle karşılaşılabilir, ancak Flex Düzeni ile artık bunlar büyük bir zorluk oluşturmaz.

Artık kum kadar çok web sohbet istemcisi var ve yapay zeka sohbet botlarıyla daha da fazlası eklendi. Ancak bir sohbeti Flexbox ile nasıl gerçekleştirebiliriz? Bunun nasıl yapıldığını bu videoda göstereceğim.

Web 2.0'dan beri neredeyse her web sitesinde bir galeri bulunmaktadır. Bu video da, böyle bir düzenin Flexbox ile harika bir şekilde nasıl uygulanabileceğini açıklıyorum.

Şimdi her şey Flex Düzeni ile ilgili açık olmalı. Son olarak, öğrenmeniz gereken şeyleri, yapabileceğiniz şeyleri ve güzel CSS Düzenleme Seçeneklerini açıklayacağım.