Sarma Savaşı

Rap dövüşü (veya savaş rapi ), iki veya daha fazla rapçinin birbirine karşı şarkı söylediği (genellikle bazı hakaretler/saldırılar dahil) bir rap performansı türüdür. Bugünün çizgi romanı, Flexbox ve flex-wrapözelliğiyle aptalca bir şaka yapmak için Rap ve Wrap sesteş sözcükleri ile oynuyor .

Esnek bir kap, içeriği varsayılan olarak tek bir satırda düzenler. Bu tamam olabilir, ancak öğelerin boyutu kabı aşarsa sıkışacak veya taşacaktır. Bunun yerine, içeriği birden fazla satıra almak isteyebiliriz. İşte burada flex-wrapdevreye giriyor.

Bu özellik, bir esnek konteynerin tek satırlı mı yoksa çok satırlı mı olacağını (esnek öğelerin miktarına ve boyutuna bağlı olarak) ve çok satırlı olması durumunda, öğelerin sarmadan sonra nasıl istifleneceğini tanımlar.

flex-wrapüç ana değeri vardır:

• nowrap: öğeler sarılmaz; bunun yerine boyutlarını ayarlayacak veya ebeveyni aşacaklar. (Bu varsayılan değerdir.)
• wrap: öğeler esnek kapsayıcıdan taşmak yerine sarılır. Çapraz başlangıçtan çapraz uca istiflenirler.
• wrap-reverse: öğeler esnek kapsayıcıdan taşmak yerine sarılır. Çapraz uçtan çapraz başlangıca istiflenirler.

Tanımlı bir genişliğe sahip 5 öğeli bir esnek kap ile bir örneği kontrol edelim. Varsayılan olarak, değeri flex-wrap"nowrap" dir, bu nedenle esnek öğeler kapsayıcıdan taşar (yaratacağı can sıkıcı yatay taşmayı önlemek için onu bir görüntü olarak koydum):

Şimdi, için bir "wrap" değeri ayarlamak üzere kodu değiştirirsek flex-wrap, esnek öğeler kapsayıcıdan taştığında bunun yerine yeni bir satıra kaydırılırlar (canlı demo):

Ancak "wrap-reverse" olarak ayarlarsak flex-wrap, sarmanın yönü tam tersidir: yeni bir satıra girmek yerine, sarılmış öğeler diğerlerini yeni bir satıra iter .

"sütun" olarak ayarlanmış son bir örnek flex-direction. Bu durumda, öğeler dikey olarak sütunlar halinde düzenlenir, böylece kaydırıldıklarında bunu satırlar yerine sütunlar halinde yaparlar:

Umarım bu örnekler faydalı olmuştur ve bugünkü çizgi romandan keyif almışsınızdır . flex-wrapAşağıdaki kaynaklar hakkında daha fazla bilgi edinin :

• Flex-wrap ile ilgili MDN makalesi
• CSS Püf Noktaları: Flexbox İçin Eksiksiz Bir Kılavuz
• Josh W Comeau: Etkileşimli Flexbox Kılavuzu