Flexbox veya esnek kapsayıcı, kullanıcıların bir kap içindeki öğeleri hizalamasına ve dağıtmasına olanak tanıyan bir düzendir. Tailwind CSS, flexbox oluşturmak ve onunla çalışmak için çeşitli yardımcı program sınıfları sunar. Kutu düzeyinde bir esnek kap, blok düzeyinde bir öğe gibi davranan/hareket eden ve bir blok oluşturan esnek bir kaptır. Ebeveyn öğesinin tüm genişliğini kaplar ve kendisinden sonra yeni bir çizgi oluşturur.
Bu yazı, Tailwind'de blok düzeyinde esnek bir kapsayıcı oluşturma yöntemini örnekleyecektir.
Tailwind'de Blok Düzeyinde Esnek Kapsayıcı Nasıl Oluşturulur/Yapılır?
Tailwind'de belirli bir blok düzeyinde esnek kapsayıcı oluşturmak için bir HTML yapısı oluşturun. Ardından, “ esnek ” istenen
Sözdizimi
< div sınıf = 'esnek ...' >
...
div >
kod
< vücut >
< div sınıf = 'esnek boşluk-2 m-2 sınır-2 sınır-siyah' >
< div sınıf = 'bg-sarı-500 p-4' > İlk eşya div >
< div sınıf = 'bg-sarı-500 p-4' > İkinci Ürün div >
< div sınıf = 'bg-sarı-500 p-4' > Üçüncü Öğe div >
div >
vücut >
Burada, üst
-
- “ esnek ” sınıfı, blok düzeyinde esnek bir kap oluşturmak için kullanılır.
- “ boşluk-2 ” sınıfı, flex'in alt öğeleri arasına 2 birim boşluk ekler.
- “ m-2 ” sınıfı, konteynerin tüm kenarlarına 2 birim marj ekler.
- “ sınır-2 ” sınıfı, 2 birim genişliğindeki konteynere kenarlık ekler.
- “ sınır-siyah ” sınıfı, kenarlık rengini siyah olarak ayarlar.
Alt esnek öğelerde:
-
- “ bg-sarı-500 ” sınıfı, esnek öğenin arka planına sarı bir renk uygular.
- “ p-4 ” sınıfı, esnek öğelerin tüm kenarlarına 4 birim dolgu ekler.
Çıktı
Yukarıdaki çıktıda kenarlık, kabın üst öğesinin (tarayıcı) tüm genişliğini kaplayan, blok seviyesinde esnek bir kap olduğunu gösterir.
Alternatif olarak, kullanıcı web sayfasındaki esnek kap öğesini inceleyerek bunu sağlayabilir:
Yukarıdaki çıktı, kabın blok düzeyinde esnek bir kap olduğunu gösterir.
Çözüm:
Tailwind'de blok düzeyinde esnek bir kapsayıcı oluşturmak için ' esnek ” belirli kapsayıcı ile yardımcı sınıf ve alt öğelerini belirtin. Kullanıcılar esnek öğeleri ihtiyaçlarına göre tanımlayabilir ve değiştirebilir. Doğrulama için kaba kenarlık ekleyin ve web sayfasını görüntüleyin veya web sayfasındaki o öğeyi inceleyin. Bu makale, Tailwind'de blok düzeyinde bir esnek kapsayıcı oluşturma yöntemini açıklamaktadır.