CSS'de Flexbox: Web sitenizi yapılandırma adımlarına ilk adımlar

Bu öğretici ile CSS ve HTML ile Flexbox düzenlemesini kullanarak web projeleriniz için bir örnek yapının nasıl oluşturulacağını öğreneceksiniz. Visual Studio Code ile birlikte gelen entegre Debugging-Tools ve Microsoft Edge ile ilgilenerek Flexbox düzeninin etkinleştirilmesi için ilk adımları atacağız. Flexbox, öğelerin esnek düzenlemesi ve düşük çaba ile karmaşık düzenler oluşturmanıza yardımcı olan güçlü bir düzen sistemidir.

Önemli Bulgular

• Flexbox ile öğeleri yatay ve dikey olarak sıralayabilirsiniz.
• Microsoft Edge Geliştirici Araçları doğrudan Visual Studio Code'a entegre edilebilir.
• Flex Yönü, Flex öğelerinin hizasını etkiler.

Adım Adım Kılavuzu

Öncelikle, Visual Studio Code'da Microsoft Edge Araçlarını kuracaksınız. Eklentilerde "VS Code için Microsoft Edge Araçları" arayın ve bunları yükleyin.

Uzantı kurulduktan sonra, Hata Ayıklama Seçeneklerine gitmeniz gerekecek. "Çalıştır ve Hata Ayıkla" seçeneğine tıklayın ve ardından "launch.json dosyası oluştur"u seçin. Bu, ayarlarınızı yapılandırmanıza yardımcı olacaktır.

Şimdi, oluşturulan yapılandırma dosyasına "Microsoft Edge Araçları" için yeni bir yapılandırma ekleyin. Localhost:3000 olarak herhangi bir yerel adres olarak eklediğinizden emin olun, çünkü terminalde sunucuyu bu bağlantı noktasında çalıştırıyoruz.

Şimdi projenizi başlatma zamanı geldi. Doğru alt dizine geçin ve npm run dev komutunu çalıştırın. Daha sonra tarayıcınızda localhost:3000 adresini açın.

Sayfayı yükledikten sonra, Microsoft Edge Geliştirici Araçlarını etkinleştirebilir ve Visual Studio Code'un yanında Araçlar penceresini açabilirsiniz.

Şimdi uygulamanızın yapısını görebilirsiniz. "Flex Containere" adlı bir konteyner (div) ve her biri sırasıyla 1, 2, 3 ve 4 metin içeren "Flex Child" sınıfına sahip dört DIV öğesi bulunmaktadır.

Şu anda Flex Container sadece 400 piksel genişliğinde ve 200 piksel yüksekliğinde iken, Flex Child'ler sırasıyla 100 piksel genişliğinde ve 50 piksel yüksekliğindedir. Şu anda hiçbir çocuk Flexbox ile düzenlenmemiş olmasına rağmen, dikey bir liste olarak görüntülenirler.

Flexbox'u etkinleştirmek için, Flex Container için display: flex; CSS özelliğini eklemeniz ve kaydetmeniz gerekmektedir. Bunu yaptığınızda, çocukların düzeninin otomatik olarak değiştiğini ve artık yan yana göründüklerini göreceksiniz.

Eğer Flex Child'leri tekrar dikey olarak sıralamak isterseniz, flex-direction özelliğini kullanabilirsiniz. Flex Container için flex-direction: column; ayarlayarak Flex Child'lerin hizasını tekrar dikey yöne çevirebilirsiniz.

Göreceksiniz ki Flex Child'ler şimdi tekrar dikey olarak sıralanmış durumda. Şimdi yükseklik ve genişlik ayarlarını değiştirirseniz, Flex olarak değil de Blok olarak görünseler bile, bir bloğa entegre edilmiş gibi görünecekler.

Bu, Flexbox Düzeninin temelleri hakkında bir genel bakıştı. Videoda ana özellikleri görüşdük ve etkilerini gördük. Gelecek öğreticilerde Flexbox'un diğer özelliklerini keşfedeceğiz ve bu güçlü düzen sistemini kullanarak neler yapabileceğinizi göreceğiz.

Özet

Bu öğreticide, CSS'de Flexbox ile basit bir yapı oluşturmayı öğrendiniz. Microsoft Edge Geliştirici Araçlarını Visual Studio Code'da entegre ettiniz ve Flex Düzenini etkinleştirmek için ilk adımları attınız. Gelecek videolarımızda inceleyeceğimiz birçok seçenek daha bulunmaktadır.