Web Sitenizi Daha Duyarlı Hale Getirmek için Flex Nasıl Kullanılır?

Modern web sitesi tasarımlarının içerikteki veya tarayıcı boyutundaki değişikliklere duyarlı olması gerekir. Vanilla CSS, medya sorguları veya flexbox kullanarak bunu başarabilirsiniz.

Esnek sarma veya esnek büyüme gibi belirli esnek özellikler, bir öğenin boyutunu veya konumunu görsel olarak çekici bir şekilde değiştirebilir. Bu makale, flex-grow, flex-shrink, flex-wrap, flex-flow ve order flex özelliklerini nasıl kullanabileceğinize ilişkin örnekleri inceleyecektir.

CSS Flex Ekranı Nasıl Kurulur

aşina değilseniz flexbox'ın temelleri, bunu keşfedebilirsin CodePen snippet'i. Basit bir esnek kutu kurulumu için örnek kod içerir. İlk önce, alt öğeleri bir üst div veya "esnek kapsayıcı" altına sarmanız gerekecek.

<div sınıfı="ebeveyn">
<div sınıfı="alt öğe"></div>
<div sınıfı="alt öğe"></div>
<div sınıfı="alt öğe"></div>
</div>

Ekle ekran: esnek ebeveyn div'e ait özellik.

.ebeveyn {
 ekran: esnek;
}

Bir Konteyner İçinde Öğeler Nasıl Büyütülür

bu esnek büyüme özellik, alt öğelerin, üst div'deki kullanılabilir alanı dolduracak şekilde genişlemesine olanak tanır. Bu özellik, her kutu öğesinin kaplayabileceği "oran" alan miktarını belirlemenize olanak tanır.

Esnek büyüme eklemek için, alt öğelerin her birine esnek büyüme CSS özelliğini ekleyin.

<div sınıfı="ebeveyn">
<div stili="arka plan rengi: kırmızı; esnek büyüme: 1"></div>
<div stili="arka plan rengi: turuncu; esnek büyüme: 1"></div>
<div stili="arka plan rengi: sarı; esnek büyüme: 1"></div>
<div stili="arka plan rengi: yeşil; esnek büyüme: 3"></div>
<div stili="arka plan rengi: mavi; esnek büyüme: 1"></div>
</div>

.ebeveyn {
 genişlik: 500 piksel;
 ekran: esnek; 
}

Her öğe için 0 esnek büyüme, kutuların üst öğelerinin alanını dolduracak şekilde genişlemeyeceği anlamına gelir. 0, bu özellik için varsayılan değerdir.

Her öğe için 1'lik bir esnek büyüme, tüm kutuları ebeveynin içindeki kullanılabilir alana sığdırmak için eşit olarak genişletmeye zorlar.

Öğelerden birinin daha büyük bir esnek büyümesi varsa, örneğin:

<div stili="arka plan rengi: yeşil; esnek büyüme: 3"></div>

Yeşil kutu, diğer kutulardan üç kat daha fazla alan kazanmaya çalışacaktır.

flex-grow özelliğinin kodunu bu bölümde görüntüleyin. CodePen snippet'i çalışan bir örnek görmek için.

Bir Konteyner İçindeki Öğeler Nasıl Küçültülür

Bazı durumlarda ebeveynin genişliği küçülebilir ve ebeveynin içindeki öğeler artık içeriye sığmaz. kullanabilirsiniz flex-shrink kutuların boyutunu küçültme özelliği. Bu şekilde, ebeveynin içinde kalabilirler.

Flex-shrink, her bir öğenin ne kadar küçülmesi gerektiğine ilişkin bir oran belirlemenize olanak tanır.

Alt div öğelerine flex-shrink özelliğini ekleyin. Öğeler kaba sığmayacak şekilde ebeveyn ve çocukların genişliklerini değiştirin.

<div sınıfı="ebeveyn">
<div stili="arka plan rengi: kırmızı; flex-shrink: 1"></div>
<div stili="arka plan rengi: turuncu; flex-shrink: 1"></div>
<div stili="arka plan rengi: sarı; flex-shrink: 1"></div>
<div stili="arka plan rengi: yeşil; flex-shrink: 2"></div>
<div stili="arka plan rengi: mavi; flex-shrink: 1"></div>
</div>

.ebeveyn {
 genişlik: 500 piksel;
 ekran: esnek; 
}
.ebeveyn div {
 genişlik: 150 piksel;
 yükseklik: 150 piksel;
}

Tüm öğeler için 1'lik bir flex-shrink, ebeveynin genişliği azaltılırsa tüm öğelerin eşit olarak küçüleceği anlamına gelir.

Öğelerden birinin daha büyük bir flex-shrink'i varsa, örneğin:

<div stili="arka plan rengi: yeşil; flex-shrink: 2"></div>

Yeşil kutu, diğer kutuların iki katı kadar küçülmeye çalışacaktır.

Bu flex-shrink özelliğinin kodunu görüntüleyin CodePen snippet'i çalışan bir örnek görmek için.

Öğeleri Sonraki Satıra Nasıl İtilir

bu esnek sarma özellik, ana kapsayıcının genişliğine sığmayan öğeleri bir sonraki satıra itmenizi sağlar. Burada eşyalar küçülmez ve eşyaların yüksekliğini ve genişliğini koruyabilirsiniz.

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

esnek sarma: nowrap | sarma | ters sarma

flex-wrap özelliğini üst esnek kapsayıcıya ekleyin. Kabın genişliğinin yeterince küçük olduğundan emin olun, böylece içindeki alt eşyalara sığmaz. Bu, taşan öğeleri yeni bir satıra zorlar.

<div sınıfı="ebeveyn">
<div sınıfı="kırmızı"></div>
<div sınıfı="Portakal"></div>
<div sınıfı="sarı"></div>
<div sınıfı="Yeşil"></div>
<div sınıfı="mavi"></div>
</div>

.ebeveyn {
 genişlik: 300 piksel;
 kenarlık: 1 piksel düz siyah;
 ekran: esnek;
 esnek sarma: sarma;
}
.ebeveyn div {
 genişlik: 100 piksel;
 yükseklik: 100 piksel;
}

Sarma değeri, kapsayıcının sağ üst köşesinden başlayarak öğeleri konumlandıracaktır. Sarma-ters değeri, öğeleri kabın sağ alt köşesinden başlayacak şekilde yeniden konumlandıracaktır. Öğeleri sararken, öğeleri alt yerine yeni bir satıra itecektir.

Üst kapsayıcıda bir yükseklik belirtirseniz kap, öğe satırları arasına boşluk ekler.

Bu boşluğu kaldırmak, ancak üst div'in yüksekliğini korumak istiyorsanız, hizalama içeriği özelliğini kullanın. align-content özelliğini üst div'de "flex-start" olarak belirtin:

.ebeveyn { 
 genişlik: 300 piksel; 
 yükseklik: 300 piksel;
 kenarlık: 1 piksel düz siyah; 
 ekran: esnek;
 esnek sarma: sarma; 
 hizalama içeriği: esnek-Başlat;
}

align-content özelliği birkaç temel özellikten biridir. hizalamayı kontrol etmenizi sağlayan esnek kutu özellikleri.

flex-wrap özelliğinin kodunu bu dosyada görüntüleyin. CodePen snippet'i bazı örnekleri görmek için.

Öğeler Sonraki Sütuna Nasıl İtilir?

Farklı bir düzen (sütun gibi) kullanıyorsanız ve yine de sarmak için öğelere ihtiyacınız varsa, esnek akış Emlak. Bu esnek özellik, esnek sarma ve esnek yön özelliklerinin bir birleşimidir.

Esnek akış özelliği için kullanabileceğiniz örnek seçenek kombinasyonları şunları içerir:

esnek sarma: satır nowrap | sütun Nowrap | sıra sarma | sütun sarma | sıra kaydırma-ters | sütun sarma-ters

Bu özellik, yukarıdaki esnek sarma özelliğine benzer şekilde çalışır. Üst esnek kapsayıcıya esnek akış ekleyin. Ana kapsayıcının genişliğinin, alt öğeleri sarmaya zorlayacak kadar küçük olduğundan emin olun:

.ebeveyn {
 genişlik: 300 piksel; 
 kenarlık: 1 piksel düz siyah; 
 ekran: esnek; 
 esnek akış: sütun sarma;
}
.ebeveyn div {
 genişlik: 100 piksel;
 yükseklik: 100 piksel;
}

Öğeler belirtilen yönde (satır veya sütun) sarılır.

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

Öğelerin Sırası Nasıl Değiştirilir

Herhangi bir dinamik veri türü nedeniyle sayfadaki öğeleri yeniden düzenlemeniz gerekirse, sipariş esnek özellik. Bu özellik, her bir öğenin görüneceği sırayı belirtmenize olanak tanır.

Rakamların mutlaka 1'den başlaması gerekmez. Herhangi bir sayı ve aralığı kullanabilirsiniz ve order özelliği, HTML öğelerini en düşükten en yükseğe sıralayacaktır.

Ana esnek kap içindeki öğelerin her birine order özelliğini ekleyin:

<div sınıfı="ebeveyn">
<div sınıfı="kırmızı" stil="sipariş: 2"></div>
<div sınıfı="Portakal" stil="sipariş: 1"></div>
<div sınıfı="sarı" stil="sipariş: 5"></div>
<div sınıfı="Yeşil" stil="sipariş: 4"></div>
<div sınıfı="mavi" stil="sipariş: 3"></div>
</div>

Bu durumda, turuncu kutu en sağda olacak, ardından kırmızı, mavi, yeşil ve ardından sarı kutular gelecek.

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

Web Sitenizde Daha Fazla CSS Özelliği ile Denemeler Yapın

Web sitenizi daha duyarlı hale getirmek için bu esnek özellikleri kullanabilirsiniz. Bu, flex-grow, flex-shrink, flex-wrap, flex-flow ve order flex özelliklerinin kullanımını içerir.

Web sitenizdeki HTML öğelerini hizalamanıza yardımcı olacak daha fazla esnek özellik hakkında da bilgi edinebilirsiniz.

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

Sonrakini Oku

Yazar hakkında