HTML Öğelerini Hizalamak için Flex Nasıl Kullanılır

CSS'deki esnek özellikler, öğeleri daha esnek ve duyarlı bir şekilde hizalamanıza olanak tanır. Bu, HTML öğelerinizin web tarayıcısında daha duyarlı olmasını istediğinizde kullanışlı hale getirir.

Bu makale, belirli esnek özellikleri nasıl kullanabileceğinizi inceleyecektir. Buna esnek yön, yaslama içeriği, kendini hizalama, hizalama öğeleri, hizalama içeriği ve boşluk özellikleri dahildir.

CSS Flex Ekranı Nasıl Kurulur

Keşfetmek için kullanabileceğiniz örnek bir yapı flexbox'ın temelleri tek bir ebeveyn div'in altındaki bir dizi alt div'dir. Aşağıdaki kodda bir ana "ebeveyn" div vardır. Üç alt div, esnek özellikleri kullanarak hizalayabileceğiniz öğeleri temsil eder.

Herhangi bir esnek stilin çalışması için, ekran: esnek ana esnek kapsayıcının özelliği.

.parent {
 ekran: esnek;
}

Esneklik olmadan, alt div'ler sayfanın aşağısındaki bir sütun oluşumunda birbiri ardına görüntülenir.

Bu kurulumun bir örneğini görüntülemek için, buradaki kodu görüntüleyin ve çalıştırın. CodePen snippet'i.

Düzen Yönü Nasıl Kontrol Edilir

bu esnek yön özellik, alt öğelerin satır veya sütun yönünü belirler.

Esnek yön özelliği için seçenekler şunları içerir:

esnek yön: satır | sütun | sıra-ters | sütun-ters

Hizalamak istediğiniz öğeleri çevreleyen bir ana kap eklemeniz gerekecek.

HTML:

CSS:

.red { arka plan rengi: kırmızı; }
.orange { arka plan rengi: turuncu; }
.yellow { arka plan rengi: sarı; }
.green { arka plan rengi: yeşil;}
.blue { arka plan rengi: mavi; }
.purple { arka plan rengi: mor; }
.parent div {
 genişlik: 40 piksel;
 yükseklik: 40 piksel;
}

Esnek yön özelliğini üst esnek kapsayıcıya uygulayın. Bu, alt div öğelerini hizalayacaktır.

.parent {
 genişlik: 300 piksel;
 ekran: esnek; 
 esnek yön: satır;
}

Birçok esnek özellik, ana eksen ve çapraz eksen kavramına atıfta bulunur. esnek yön olduğunda kürek çekmek, ana eksen yatay yönü ve çapraz eksen dikey yönü temsil eder. Bir sütun değeri bu eksenleri değiştirir.

Bu bölümde esnek yön özelliğinin kodunu görüntüleyin. CodePen snippet'i bazı örnekleri görmek için.

Öğeleri Çapraz Eksen Boyunca Hizalama

bu hizalama öğeleri özellik, öğelerin çapraz eksen boyunca hizalanmasını kontrol eder. Varsayılan esnek yön için satır, hizalama öğeleri, öğelerin dikey hizalamasını kontrol eder.

Öğeleri hizalama özelliği için seçenekler şunları içerir:

hizalama öğeleri: esnek başlangıç ​​| esnek uç | hizalama öğeleri | Uzatmak

Altlarını hizalamak için üst kapsayıcıya hizalama öğeleri özelliğini ekleyin.

.parent {
 ekran: esnek; 
 hizalama öğeleri: esnek başlangıç;
}

Ek olarak, bir taban çizgisi kullanarak öğeleri hizalamayı seçebilirsiniz. Varsayılan olarak, taban çizgisi seçeneği, tüm öğeleri öğelerin tabanına göre hizalar.

Ayrıca, üst (ilk taban çizgisi) veya alt (son taban çizgisi) gibi taban çizgisinin nereden başlayacağını da seçebilirsiniz.

hizalama öğeleri: temel | ilk temel | son temel;

Öğeleri hizalamak için: taban çizgisinin çalışması için, her öğenin farklı bir yüksekliğe veya genişliğe sahip olduğundan emin olun (kullandığınız eksene bağlı olarak).

​​​

Bu bölümde hizalama öğeleri özelliğinin kodunu görüntüleyin. CodePen snippet'i bazı örnekleri görmek için.

Bireysel Öğelerde Hizalama Nasıl Geçersiz Kılınır

kullanabilirsiniz kendini hizala üst kapsayıcının herhangi bir hizalama öğesi stilini geçersiz kılma özelliği. Bu, tek bir öğe üzerinde ayrı bir esnek hizalama ayarlayabileceğiniz anlamına gelir.

align-self özelliği için seçenekler şunları içerir:

kendini hizala: otomatik | esnek başlangıç ​​| esnek uç | merkez | temel | Uzatmak

Örneğin, ana kabın "satır" olarak ayarlanmış bir esnek yön stiline sahip olduğunu söyleyin.

.parent {
 ekran: esnek; 
 esnek yön: satır;
}

align-self özelliğini tek tek öğeye uygulayabilirsiniz. Bireysel öğe, align-self özelliğinin stilini kullanacak ve öğeyi üst kapsayıcı boyunca ortalayacaktır.

align-self özelliğinin kodunu bu bölümde görüntüleyin. CodePen snippet'i bazı örnekleri görmek için.

Çapraz Eksen Boyunca Çizgiler Nasıl Dağıtılır

bu hizalama içeriği özellik, çocukları dikey eksen boyunca hizalar. Ayrıca, birden çok satırdaki öğeler arasındaki boşluğu da belirleyebilir.

Hizalama içeriği özelliği için seçenekler şunları içerir:

hizalama içeriği: esnek başlangıç ​​| esnek uç | merkez | streç | boşluk | uzaylı

align-content özelliğini üst esnek kapsayıcıya ekleyin. Hizalama içeriği özelliği yalnızca esnek sarma özelliği ayarlanmışsa çalışır. flex-wrap ekleyin: üst kaba sarın ve öğeleri birden fazla satıra zorlamak için üst div'in genişliğini azaltın.

.parent {
 esnek sarma: sarma;
 ekran: esnek;
 hizalama içeriği: esnek başlangıç;
 genişlik: 180 piksel;
}

align-content özelliğinin kodunu bu bölümde görüntüleyin. CodePen snippet'i bazı örnekleri görmek için.

Ana Eksende Öğeler Nasıl Hizalanır

bu haklı içerik özellik, alt öğelere sağa, sola veya ortaya hizalama ekler. Ayrıca, içeriği yaslarken aralarına boşluk ekleyerek öğeleri yayar.

justify-content özelliği için seçenekler şunları içerir:

haklı içerik: esnek başlangıç ​​| esnek uç | merkez | boşluk | uzay-etrafında | boşluk eşit

Hizalamak istediğiniz öğeleri bir ana esnek kapsayıcının altına sarın.

HTML:

CSS:

.red { arka plan rengi: kırmızı; }
.green { arka plan rengi: açık yeşil; }
.blue { arka plan rengi: mavi; }

justify-content özelliğini üst esnek kapsayıcıya ekleyin.

.parent {
 genişlik: 300 piksel;
 ekran: esnek; 
 haklı içerik: esnek başlangıç;
}

justify-content özelliği, CSS Box Alignment belirtiminde listelenen değerleri de destekler. Bu, "başlangıç", "bitiş", "sol" ve "sağ" gibi değerleri içerir. Bazı tarayıcılar bunları desteklemez.

justify-content özelliği ayrıca kullanabileceğiniz "güvenli" bir anahtar kelimeye sahiptir. Bu, öğelerin ana kapsayıcının aralığında kalmaya çalışmasını sağlar.

Ayrıca uzun bir kelimeyi ortalamanız durumunda veri kaybını önlemek için kullanılır. safe anahtar sözcüğünü kullanmak, daha kısa bir div'in ilk ve son harfleri kesmesini önler.

.parent {
 ekran: esnek; 
 justify-content: güvenli merkez;
}

Güvenli anahtar kelime ayrıca belirli tarayıcılarla sınırlıdır. adresinden uyumluluğu kontrol edebilirsiniz. Kullanabilirmiyim.

Justify-content özelliğinin kodunu bu bölümde görüntüleyin. CodePen snippet'i bazı örnekleri görmek için.

Öğeler Arasına Boşluk Nasıl Eklenir

bu açıklık özellik, öğeler arasına bir miktar boşluk eklemenizi sağlar. Bu duyarlı bir düzen oluşturmanıza yardımcı olabilecek daha yeni CSS özellikleri.

Gap özelliğini üst esnek kapsayıcıya uygulayın.

.parent {
 ekran: esnek;
 boşluk: 70 piksel;
}

Öğelerin uzunluğunu üst öğenin genişliğini aşmaya zorlayan bir boşluk eklerseniz, öğeler sıranın içine sığdırmak için küçülür.

.parent { 
 genişlik: 300 piksel;
 boşluk: 120 piksel;
}

Öğeleri yeni bir satıra itmek için esnek sarma: sarma kullanırsanız, boşluk miktarı satırlar arasındaki boşluğa da uygulanır.

.parent { 
 genişlik: 300 piksel;
 esnek sarma: sarma;
 boşluk: 120 piksel;
}

Ek olarak, şunları da ayarlayabilirsiniz: satır aralığı ve sütun boşluğu özellikleri. Yine, bunları ana esnek kapsayıcıya uygulamanız gerekecek.

Row-gap özelliği, her satır arasındaki boşluğu belirler. Sütun boşluğu özelliği, her sütun arasındaki boşluğu belirler.

.parent { 
 satır aralığı: 120 piksel; 
}
.parent { 
 sütun aralığı: 120 piksel; 
}

Bu boşluk özelliği için kodu görüntüleyin CodePen snippet'i bazı örnekleri görmek için.

Web Sitenizde Daha Fazla Flex Özelliği Kullanma

Umarım, artık web sayfanızdaki öğeleri hizalamak için kullanabileceğiniz çeşitli esnek özelliklere aşinasınızdır. Bu, esnek yön, yaslama içeriği, kendini hizalama, hizalama öğeleri, hizalama içeriği ve boşluk özelliklerini nasıl kullanabileceğinizi içerir.

Flexbox güçlü bir yerleşim tekniğidir, ancak CSS'nin yalnızca küçük bir parçasıdır. Ayrıca yeni CSS özellikleri, temiz kodlama teknikleri ve CSS optimizasyonu için kullanılan araçlar hakkında bilgi edinebilirsiniz.

CSS Dosyalarını Kontrol Etmek, Temizlemek ve Optimize Etmek için 11 Faydalı Araç

Sonrakini Oku

Yazar hakkında