Ders 89 - Tanıtım - Tasarım & Flexbox | CSS | SIFIRDAN WEB SİTESİ YAPIMI | FrontEnd Eğitimi скачать в хорошем качестве

Ders 89 - Tanıtım - Tasarım & Flexbox | CSS | SIFIRDAN WEB SİTESİ YAPIMI | FrontEnd Eğitimi

Ücretsiz UDEMY Kursu için videoyu beğenip, yorumlarda mail adresinizi yazın. 5 dakika sonra link mailinize gelsin --------------------------------------------------------------------------- Merhaba sevgili izleyiciler, ben Haydar Canıbek. Bu videoda, modern CSS tasarımlarında çok önemli bir yere sahip olan Flexbox (Flexible Box Layout) özelliğini tanıyacağız! Flexbox, web sayfalarında düzen ve hizalamayı kolaylaştırarak, karmaşık yerleşim yapılarını dahi hızlı ve esnek bir şekilde oluşturmanıza olanak tanıyan bir CSS düzen modelidir. Flexbox Nedir? Flexbox, özellikle yatay ve dikey hizalamalar ve yerleşimler için geliştirilmiş, CSS’in en güçlü araçlarından biridir. Geleneksel yöntemlerde margin, padding veya float gibi özelliklerle yapılmaya çalışılan işlemleri çok daha hızlı ve basit bir şekilde düzenlemenizi sağlar. Flexbox, esnek yapısıyla her türlü cihazda harika görünen duyarlı tasarımlar yapmanıza yardımcı olur. Flexbox’un Temel Yapısı Flexbox kullanmak için öncelikle bir konteyner belirlememiz gerekiyor. Flexbox yapısı iki ana bileşenden oluşur: Flex Container: İçinde esnek düzenin oluşturulacağı ana kapsayıcı. Flex Items: Bu kapsayıcı içindeki düzenlenecek olan öğeler. Bir öğeye display: flex; eklediğinizde, o öğe bir flex container olur ve içindeki öğeler flex item olarak yerleşmeye başlar. Flexbox'un Sık Kullanılan Özellikleri justify-content: Flex container içindeki öğeleri yatay düzlemde hizalar. Örneğin, justify-content: center; kullanarak öğeleri yatayda merkeze alabilirsiniz. align-items: Öğeleri dikey düzlemde hizalamak için kullanılır. Örneğin, align-items: center; ile tüm öğeleri dikey olarak ortalayabilirsiniz. flex-direction: Öğelerin yatay (row) veya dikey (column) olarak sıralanmasını sağlar. Yani, bir row düzeninde soldan sağa, bir column düzeninde ise yukarıdan aşağıya sıralama yapılır. flex-wrap: Öğeler sığmazsa, bir sonraki satıra geçmelerini sağlar. flex-wrap: wrap; ile responsive yapılar kolayca oluşturulabilir. align-content: Çok satırlı düzenlerde her bir satırın nasıl hizalanacağını belirler. Flexbox Kullanarak Tasarımlarınızı Geliştirin Flexbox, sadece tek bir satır veya sütun düzeni kurmakla kalmaz; aynı zamanda kart düzenleri, galeri tasarımları veya modern başlık düzenleri gibi karmaşık yapıları da oldukça kolaylaştırır. Ayrıca order özelliği sayesinde öğelerin sırasını değiştirebilir, flex-grow ve flex-shrink ile öğelerin nasıl esneyeceğini belirleyebilirsiniz. Flexbox’ın Avantajları Esnek Hizalama: Flexbox ile öğeleri yatay veya dikey olarak hizalamak çok kolaydır. Responsive Tasarımlar: Flexbox, her ekran boyutunda uyumlu bir şekilde çalışır. Karmaşık Yerleşimlerin Kolay Yönetimi: Kart sistemleri, menüler veya galeri düzenleri gibi yapıları kolayca oluşturabilirsiniz. Bu Eğitimde Öğrenecekleriniz Bu eğitimde, Flexbox’un temellerini öğrenip, pratik örneklerle web sayfalarınızı nasıl daha düzenli ve esnek bir hale getirebileceğinizi göreceğiz. Flexbox’un gücünü kavrayarak, modern web tasarımlarında daha hızlı ve daha esnek bir şekilde çalışmayı öğrenmiş olacaksınız. Kanalımda benzeri içerikler için abone olmayı, yeni videolar için bildirimleri açmayı ve yorumlarınızı paylaşmayı unutmayın! Flexbox ile harika projeler yapmaya hemen başlayalım.