सीएसएस फ्लेक्स ग्रिड - पिछले आइटम के लिए एक ही चौड़ाई

Question

अरे मैं एक गैलरी के लिए एक संवेदनशील बॉक्स लेआउट, जो इस http://webdesignerwall.com/demo/responsive-column-grid/

उदाहरण के साथ समस्या की तरह लग रहा है कि चौड़ाई hardcoded कर रहे हैं और मीडिया के प्रश्नों हैं बनाने के लिए कोशिश कर रहा हूँ ज़रूरी। मेरे पास एक संभावित समाधान होने के लिए कई स्तंभों का मार्ग है।

मैं फ्लेक्स girds साथ एक ही परिणाम प्राप्त कर सकते हैं, हालांकि अंतिम स्तंभ दूसरों के रूप में इस CodePen में दिखाया गया है से भी बड़ा है:

http://codepen.io/anon/pen/zClcx

एचटीएमएल

<div class="flex-container same-width same-height"> 
    <div class="flex-item"> 
    <div>g</div> 
    </div> 
    <div class="flex-item"> 
    <div>g</div> 
    </div> 
    <div class="flex-item"> 
    <div>g</div> 
    </div> 
    <div class="flex-item"> 
    <div>why am I longer than my friends?</div> 
    </div> 
</div> 

सीएसएस

.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    width: 100%; 
    max-width: 950px; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    background: grey; 

    & > * { 
    min-width: 300px; 
    background: green; 
    max-width: 404px; 
    flex: 1 1 auto; 
    } 
    .flex-item > div { 
    background: red; 
    } 
} 

प्रश्न:मैं आखिरी कॉलम को दूसरों के समान आकार कैसे बना सकता हूं?

Answer 1

एक फ्लेक्स बॉक्स से आप अपने max- और min- चौड़ाई के बारे में सावधान रहना होगा का उपयोग करना। w3schools से उद्धरण:

युक्ति: बॉक्स जो घटते हैं और बढ़ते हैं, वे तत्व लचीले होते हैं या बढ़ते हैं। जब भी एक बॉक्स में अतिरिक्त जगह होती है, उस स्थान को भरने के लिए लचीले तत्वों का विस्तार किया जाता है।

इसका विरोध करने के लिए, अपने कंटेनर के लिए एक्स संख्या पिक्सेल की चौड़ाई शुरू करें लेकिन आंतरिक बक्से के लिए अपनी पिक्सेल मात्रा के बजाय प्रतिशत का उपयोग करें। कंटेनर का प्रतिशत आपके सभी कॉलम के लिए समान होगा।

ऐसा करने से यह एक फ्लेक्स बॉक्स की आवश्यकता को भी हटा देता है क्योंकि ये केवल तभी होते हैं जब आप लंबवत दिशा के बजाय क्षैतिज दिशा में बक्से का विस्तार करना चाहते हैं (उन्हें प्रत्येक की सामग्री के आधार पर व्यापक बनाते हैं)।

पीएस - यदि आप इस प्रतिक्रियाशील को चाहते हैं और साथ ही साथ अंतरिक्ष के लिए चौड़ाई को समानांतर रखने के लिए, अपने मार्जिन के लिए प्रतिशत का उपयोग करें (लेकिन सीमा और पैडिंग आकारों को ध्यान में रखें)। यह आवश्यक नहीं है लेकिन विभिन्न उपकरणों पर लगातार दिखने और महसूस करने के लिए एक उपयोगी सुविधा है।

Answer 2

यह एक आम गलतफहमी है, लेकिन फ्लेक्सबॉक्स ग्रिड सिस्टम नहीं है। एक बार फ्लेक्स आइटम लचीले होने के लिए सेट हो जाते हैं, तो उन्हें एक ही लाइन पर अन्य फ्लेक्स आइटम के सापेक्ष आकार दिया जा सकता है, न कि किसी भी अन्य रेखा पर फ्लेक्स आइटम के साथ। विशिष्ट चौड़ाई का उपयोग किये बिना उन्हें लाइन करने के लिए मजबूर करने का कोई तरीका नहीं है (हालांकि यह चौड़ाई प्रतिशत हो सकती है)।

आपकी फ्लेक्स आइटम लचीली होने के कारण आपकी न्यूनतम चौड़ाई यहां कोई उद्देश्य नहीं देती है। आपका फ्लेक्स-सिकुड़ मूल्य कोई उद्देश्य नहीं देता है क्योंकि आपके फ्लेक्स आइटम को लपेटने की अनुमति है। अधिकतम पंक्ति एकमात्र चीज है जो अंतिम पंक्ति को भरने से अंतिम पंक्ति पर वस्तुओं को रोकती है। सही अधिकतम-चौड़ाई मान सेट करने के लिए आपको पिछली पंक्ति में आइटम्स की सटीक चौड़ाई जाननी होगी।

संबंधित:

• Flex-box: Align last row to grid
• Left aligned last row in centered grid of elements

Answer 3

फ्लेक्स करने के लिए विकसित सेट 0.

बेला: http://jsfiddle.net/RichAyotte/Ev5V7/

<div class='flex-container seven'> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
</div> 

.flex-container { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: flex-start; 
} 
.flex-container div { 
    font-size: 200%; 
    padding: 2mm; 
    margin: 10px 10px; 
    flex: 0 1 20%; 
    box-shadow: 3px 3px 2px 0px rgba(50, 50, 50, 0.5); 
}