Item Flow भाग 1: CSS में वेब लेआउट को सेट करने का नया तरीका

 (webkit.org)
6 पॉइंट द्वारा carnoxen 2026-01-27 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें

पृष्ठभूमि

लंबे समय के साथ Flexbox और Grid layout सिर्फ CSS से संभव हो गए, लेकिन
Masonry layout के लिए अब भी JavaScript का सहारा लेना पड़ता था। इस layout को लेकर browsers के बीच कई तरह की चर्चाएँ हुईं। Chrome ने एक नया layout लागू किया (display: masonry), और Firefox व Safari ने grid-template-*: collapse सेट करने के तरीके से इसे लागू किया।

लेकिन फिर किसी ने पहले से बिल्कुल अलग तरीका प्रस्तावित किया। विचार यह था कि Masonry, Grid और Flexbox layout को एक में एकीकृत किया जाए।

Flexbox और Grid के flow को एक करना

अब तक अंदरूनी elements के flow को सेट करने का तरीका हर layout में अलग था।

.container {  
    /* Flexbox */  
    flex-direction: row | row-reverse | column | column-reverse;  
    flex-wrap: nowrap | wrap | wrap-reverse;  
    /* flex-direction + flex-wrap */  
    flex-flow: <flex-direction> <flex-wrap>;  
  
    /* Grid */  
    grid-auto-flow: row | column | dense;  
}

अब इस functionality को नीचे दिए गए features में एकीकृत करने की योजना है।

  • item-direction
  • item-wrap
  • item-pack
  • item-slack

item-direction

यह अंदरूनी elements के flow की दिशा को परिभाषित करता है। यह flex-direction और grid-auto-flow properties की जगह लेता है।

.container {  
    item-direction: row | row-reverse | column | column-reverse;  
}

item-wrap

जब अंदरूनी elements को सजाया जाता है और एक पंक्ति भर जाती है, तब उसका behavior और direction क्या होगा, यह परिभाषित करता है। यह flex-wrap property की जगह लेता है।

.container {  
    item-wrap: auto || [[nowrap | wrap] | [normal | reverse]];  
}

Grid layout में मूल रूप से wrap तरीका होता है, लेकिन item-wrap: nowrap सेट करने पर सभी elements सिर्फ एक ही पंक्ति में सजते हैं, और एक समान चौड़ाई वाला layout भी बनाया जा सकता है।

item-pack

यह परिभाषित करता है कि अंदरूनी elements को कैसे भरा या जमाया जाए। यह grid-auto-flow: dense property की जगह लेता है।

.container {  
    item-pack: normal | dense;  
}

Flexbox layout में पहले ऐसा कुछ नहीं था, लेकिन item-pack: dense आने से अब Grid की तरह उसी तरीके से pack किया जा सकता है। उदाहरण के लिए, पहले wrap enabled Flexbox में elements को सजाते समय अगर किसी पंक्ति में बची जगह element की चौड़ाई से छोटी होती, तो वह बिना शर्त अगली पंक्ति में चला जाता था। अब आगे चलकर, यदि उससे पिछली किसी पंक्ति में उस element के लिए जगह हो, तो उसे पहले वहीं रखा जा सकता है।

इसके अलावा कुछ नए तरीके भी जोड़े जा सकते हैं जो पहले मौजूद नहीं थे।

  • item-pack: balance: text-wrap: balance की तरह, हर पंक्ति में मौजूद elements की संख्या दूसरी पंक्तियों के समान रखी जा सकती है।
  • item-pack: collapse: इससे अंतिम लक्ष्य यानी Masonry layout को आसानी से लागू किया जा सकता है।

item-slack

यह एक property है जो elements को जमाते समय हर पंक्ति में कम-से-कम कितना खाली space छोड़ा जाए, यह सेट करती है। यह पहले प्रस्तावित grid-slack और masonry-slack properties की जगह लेती है। item-slack नाम पर अभी भी चर्चा चल रही है। (अनुवादक टिप्पणी: अभी इसे flow-tolerance के रूप में तय किया गया है।)

सब कुछ एक साथ

अब नीचे की ओर सजने वाला Flexbox बनाने के लिए इसे इस तरह सेट किया जा सकता है।

.container {  
    display: flex;  
    item-direction: column;  
    item-wrap: nowrap;  
}

इसका एक और छोटा तरीका भी आने वाला है।

.container {  
    display: flex;  
    item-flow: column nowrap;  
}

इस property का नाम और इसका behavior अभी चर्चा में है।

फिलहाल Masonry layout को display: grid-lanes में बदल दिया गया है। लेकिन item-* properties पर अब भी सकारात्मक चर्चा चल रही है।

व्यक्तिगत रूप से, मुझे लगता है कि जब सब कुछ एकीकृत हो, तो display: flex या grid भी छोड़ा जा सके तो अच्छा होगा।

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.