CSS Esnek Kutusu #1. İlk Flexbox Düzeninizi Oluşturma

2018'in sonunda, ön uç web tasarımında devrim yaratan mizanpaj aracı CSS Grid hakkında bir kitap yayınladık. CSS Izgarası, tamamen CSS'ye özgüdür ve sütunları ve satırları kullanarak ızgara tabanlı bir düzen sistemi oluşturmanıza olanak tanır.

"CSS Grid Açıklaması" hemen en çok satan kitaplarımızdan biri oldu. Bu yüzden bu kitap için büyük bir güncelleme ve genişletme üzerinde çalışıyoruz. Ayrıca "Flexbox Açıklaması" adlı yeni bir kitap üretmeye başlıyoruz. Flexbox, CSS Izgarası ile yakından ilişkilidir, ancak gözle görülür farklılıklar vardır:

• Flexbox, tek boyutlu bir yerleşim modelidir. Sütunları veya satırları yönetebilir.
• CSS Grid, iki boyutlu bir yerleşim modelidir. Hem sütunları hem de satırları yönetebilir.

Önümüzdeki birkaç hafta boyunca, "Flexbox Açıklaması" yazarken bir dizi Flexbox öğreticisi yayınlayacağız. Bu ilk eğitim, CSS Flexbox'ın temel kavramlarını pratik örneklerle gösterir.

Flexbox'a Giriş

CSS Flexbox belirtimi, bir kap ( flex-container ) içinde öğeler ( flex-items ) içeren bir düzeni açıklar. Bu öğeler, mevcut konteyner alanına göre genişlik ve/veya yükseklik olarak büyüyebilir veya küçülebilir. Öğeler, ana konteynere mümkün olan en iyi şekilde sığdırmak için "esnek".

Bu "esnek" öğeler herhangi bir yönde (satır içi eksen veya blok ekseni) düzenlenebilir, böylece ekranın boyutunu (genişlik veya yükseklik) veya yönünü değiştirirken çok fazla esneklik sağlar.

Bu bağlantıya tıklayarak Flexbox W3C spesifikasyonuna göz atabilirsiniz.

Aşama 1. HTML'yi oluşturun

Bu örneğe, bazı örnek kodlarla bir HTML dosyası oluşturarak başlayalım. Sizin için biraz HTML hazırladım - bu 3 alt öğe içeren bir kapsayıcı.

• Tercih ettiğiniz kod düzenleyiciyi açın.
• Boş bir HTML dosyası oluşturun.
• Bu sayfayı ziyaret edin ve HTML kodunu kopyalayın
• Bu kodu HTML dosyanıza yapıştırın.

Adım 2. CSS'yi oluşturun

Artık 3 elemanlı bir kabımız olduğuna göre, biraz stil ekleyelim.

• style.css adlı bir CSS dosyası oluşturun. . Bu dosyayı HTML dosyanızla aynı klasöre yerleştirin. Bu CSS dosyasının bağlantısı HTML dosyanızın etiketinde zaten var
• Codepen'de de bulunan bu kodu kopyalayıp yapıştırın:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Bu resim, HTML dosyasını bir tarayıcıda açtığınızda kodunuzun nasıl görüneceğini gösterir. 3 alt öğe, üst kapsayıcıları kadar geniştir. Yükseklik, her bir öğenin içeriğine göre belirlenir. Her tarafta 2rem (masaüstü ekranında yaklaşık 32 piksel) dolgusuna dikkat edin.

Aşama 3. CSS Flexbox Stilleri

Şimdi bu öğreticinin Flexbox bölümünü başlatma zamanı.

• CSS dosyasını düzenleyin ve şu kodu ekleyin:

 .container { display: flex; }

Bu resim, kodunuzun şimdi nasıl görüneceğini gösterir:

Ne değişti? Teknik açıdan, ana kapsayıcı artık bir flex-container . Alt öğeler flex-items öğelere dönüştü.

Konteynerlerin boyutu neden değişti? Esnek öğeler, ana kapsayıcıları kadar geniş değildir. Artık içlerindeki içerik kadar genişler. flex-items , solda kayan öğeler olarak görünür. Satır içi öğeler gibi davranırlar.

Ana kabın genişliğini açıkça görmek için bir background-color uygulayabilirsiniz:

• CSS kodunu düzenleyin ve şu kodu ekleyin:

 .container { display: flex; background-color: #f5ca3c; }

Kapsayıcı şimdi şu şekilde görünür:

flex-container (çoğunlukla) blok düzeyinde bir öğe gibi davrandığını zaten fark ettiniz. Bununla birlikte, kapsayıcının satır içi düzey bir öğe gibi davranmasını da sağlıyoruz. Bunu yapmak için display özelliğinin değerini inline-flex olarak değiştiriyoruz.

• CSS kodunu düzenleyin:

 .container { display: inline-flex; background-color: #f5ca3c;

Bu resimde görebileceğiniz gibi, esnek kap, artık satır içi düzeyde bir öğedir:

Bu öğreticiye devam etmeden önce, davranışı blok düzeyinde bir öğeyle değiştirelim.

• CSS kodunu düzenleyin:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

4. Adım. Flexbox Satırlarını Sütunlara Değiştirme

Şimdiye kadar bir flex-container oluşturduk. Ayrıca bu kapsayıcının alt flex-items dönüştürüldüğünde nasıl davrandığını da gördük.

Şimdi düzenimizin yönünü nasıl değiştireceğimizi öğrenelim. flex-container varsayılan yönü satır tabanlıdır. Ancak, flex-direction özelliği ile bu davranışı değiştirebilirsiniz.

• CSS kodunu düzenleyin:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

Kodunuzu güncelledikten sonra herhangi bir değişiklik görmeyeceksiniz çünkü flex-direction: row varsayılan değerdir. Gerçekten görünür bir değişiklik yapalım: flex-container yönünü column olarak düzenleyin.

• CSS kodunu düzenleyin:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

Bu sonraki resim, düzeninizdeki değişikliği gösterir:

Artık flex-container yönü blok eksenine (sütun) dayanmaktadır. flex-items yukarıdan aşağıya hizalanır ve bu öğelerin her biri, ana kapsayıcısının tam genişliğini alır. Böylece blok elemanlar gibi davranırlar.

Şimdi, bu noktada bazı şeyleri sorgulamaya başlayabilirsiniz: " Hey, benim düzenim şimdi bu eğitimdeki ilk düzen ile tamamen aynı görünüyor! " Bu doğru. Görsel olarak, flex-container bu mevcut düzen ile bu örneğin bir blok kapsayıcılı ilk düzeni arasında hiçbir fark yoktur.

Ancak, artık daha fazla kontrole sahibiz. Örneğin, row-reverse ve column-reverse özellikleriyle flex-items yönünü tersine çevirebilirsiniz.

• CSS kodunu düzenleyin:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Bu resim, düzeninizin bu yeni güncellemeden sonra nasıl görüneceğini gösterir:

flex-items flex-direction özelliğinin değerini değiştirin.

• CSS kodunu düzenleyin:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Flexbox Özeti

Tebrikler! Bir flex-container nasıl bildireceğinizi öğrendiniz. flex-items , üst kapsayıcılarına ( row veya column ) uygulanan flex-direction bağlı olarak nasıl davrandığını gördünüz. Ayrıca flex-items sırasını nasıl tersine çevireceğinizi de biliyorsunuz.

Tüm bu değişiklikler CSS ile yapıldığından sitenizin HTML işaretlemesinin yapısını etkilemeyecektir. Flexbox kullanmanın avantajlarından biri de budur. flex-items sırasını tersine çevirmek, bu CSS modülünün özelliklerinden yalnızca biridir. Flexbox hakkında öğrenilecek daha çok şey var, bu nedenle birkaç gün içinde bu eğitimin 2. Kısmına göz atın.

Bu serinin daha fazla öğreticisi

• CSS Esnek Kutusu #2. justify-content Özelliği Nasıl Kullanılır
• CSS Esnek Kutusu #3. hizalama öğeleri özelliği
• CSS Esnek Kutusu #4. Esnek Büyüme Özelliği