फ्लेक्सबॉक्स: प्रति पंक्ति 4 आइटम

मैं 8 आइटम प्रदर्शित करने के लिए एक फ्लेक्स बॉक्स का उपयोग कर रहा हूं जो मेरे पृष्ठ के साथ गतिशील रूप से आकार बदल जाएगा। आइटम को दो पंक्तियों में विभाजित करने के लिए मैं इसे कैसे मजबूर करूं? (प्रति पंक्ति 4)?फ्लेक्सबॉक्स: प्रति पंक्ति 4 आइटम

.parent-wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
.parent { 
 
    display: flex; 
 
    font-size: 0; 
 
    flex-wrap: wrap; 
 
    margin: -10px 0 0 -10px; 
 
} 
 
.child { 
 
    display: inline-block; 
 
    background: blue; 
 
    margin: 10px 0 0 10px; 
 
    flex-grow: 1; 
 
    height: 100px; 
 
}

<body> 
 
    <div class="parent-wrapper"> 
 
    <div class="parent"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
</body>

स्रोत

2015-04-09 Vivek Maharajh

[अपडेट] यह प्रश्न एक गरीब गैर जिम्मेदार डिजाइन पर आधारित था। यदि आप नीचे दिए गए उत्तरों में से किसी एक का उपयोग कर पाते हैं, तो सावधान रहें। एक अच्छी डिजाइन में, आपके पास व्यापक स्क्रीन पर और अधिक छोटी स्क्रीन पर अधिक आइटम होंगे। सभी स्क्रीन आकारों के लिए 4 आइटम को मजबूर करना केवल स्क्रीन चौड़ाई की एक संकीर्ण सीमा पर आकर्षक लगेगा। –

.child तत्वों के लिए एक चौड़ाई जोड़ें -

(http://jsfiddle.net/vivmaha/oq6prk1p/2/ या आप jsfiddle पसंद करते हैं):

यहाँ एक प्रासंगिक स्निप है। यदि आप इसे हमेशा प्रति पंक्ति 4 रखना चाहते हैं तो मैं व्यक्तिगत रूप से margin-left पर प्रतिशत का उपयोग करूंगा।

DEMO

.child { 
    display: inline-block; 
    background:blue; 
    margin:10px 0 0 2%; 
    flex-grow: 1; 
    height:100px; 
    width: calc(100% * (1/4) - 10px - 1px); 
}

स्रोत

2015-04-09 18:52:45 dowomenfart

अच्छा विचार। मैंने इस विचार को मामूली संपादन के साथ इस्तेमाल किया। http://jsfiddle.net/vivmaha/oq6prk1p/6/ –

आह। यह वास्तव में मेरी समस्या का समाधान नहीं करता है। उदाहरण के लिए यहां देखें: http://jsfiddle.net/vivmaha/oq6prk1p/7/। मेरे मार्जिन के लिए प्रतिशत का उपयोग करने की स्वतंत्रता नहीं है। वे एक निश्चित चौड़ाई होना चाहिए। इसका मतलब यह है कि हमने जो जादू 23% चुना है वह काम नहीं करेगा क्योंकि यह निश्चित मार्जिन को ध्यान में नहीं लेता है। –

हां, कैल्क इसे हल करता है! 'कैल्क (100% * (1/4) - 10 पीएक्स - 1 पीएक्स)'। Http://jsfiddle.net/vivmaha/oq6prk1p/9/ –

-10

यहाँ calc() का उपयोग किए बिना एक और तरीका है।

// 4 PER ROW 
// 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins... 
.child { 
    margin: 0 2% 0 2%; 
    width: 21%; 
} 

// 3 PER ROW 
// 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333/2 = 1.66666) 
.child { 
    margin: 0 1.66666% 0 1.66666%; 
    width: 30%; 
} 

// and so on!

यह सब कुछ है। आप अधिक सौंदर्य आकार प्राप्त करने के लिए आयामों के साथ फैंसी प्राप्त कर सकते हैं लेकिन यह विचार है।

स्रोत

2016-07-31 20:30:38 williamle8300

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

यहां एक और ऐप है।

आप इस तरह से भी में इसे पूरा कर सकते हैं:

.parent{ 
    display: flex; 
    flex-wrap: wrap; 
} 

.child{ 
    width: 25%; 
    box-sizing: border-box; 
}

नमूना: https://codepen.io/capynet/pen/WOPBBm

और अधिक पूर्ण नमूना: https://codepen.io/capynet/pen/JyYaba

स्रोत

2017-07-13 22:36:47 Capy

अगर मेरे पास कम से कम 4 बच्चे हैं तो क्या होगा? मैं उस खाली खाली जगह को नापसंद करता हूं, बच्चा उत्तरदायी नहीं है ... – candlejack

आप flex-wrap: wrap कंटेनर पर मिल गया है। यह अच्छा है, क्योंकि यह डिफ़ॉल्ट मान ओवरराइड करता है, जो nowrap (source) है। यही कारण है कि आइटम some cases में ग्रिड बनाने के लिए लपेटते नहीं हैं।

इस मामले में, मुख्य समस्या flex-grow: 1 फ्लेक्स आइटम पर है।

flex-grow संपत्ति वास्तव में आकार का फ्लेक्स आइटम नहीं है। इसका कार्य कंटेनर में मुक्त स्थान वितरित करना है (source)। तो कोई फर्क नहीं पड़ता कि स्क्रीन आकार कितना छोटा है, प्रत्येक आइटम को लाइन पर खाली स्थान का आनुपातिक हिस्सा प्राप्त होगा।

अधिक विशेष रूप से, आपके कंटेनर में आठ फ्लेक्स आइटम हैं। flex-grow: 1 के साथ, प्रत्येक को लाइन पर 1/8 खाली स्थान प्राप्त होता है। चूंकि आपकी वस्तुओं में कोई सामग्री नहीं है, इसलिए वे शून्य चौड़ाई तक कम हो सकते हैं और कभी भी लपेट नहीं पाएंगे।

समाधान आइटम पर चौड़ाई को परिभाषित करना है। इस प्रयास करें:

.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    flex: 1 0 20%; /* explanation below */ 
 
    margin: 5px; 
 
    height: 100px; 
 
    background-color: blue; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

flex-grow: 1 flex आशुलिपि में परिभाषित के साथ

, वहाँ flex-basis की कोई आवश्यकता नहीं 25% है, जो वास्तव मार्जिन की वजह से प्रति पंक्ति तीन आइटम में परिणाम होगा होने के लिए है।

चूंकि flex-grow पंक्ति पर खाली स्थान का उपभोग करेगा, flex-basis केवल एक रैप को लागू करने के लिए पर्याप्त होने की आवश्यकता है। इस मामले में, flex-basis: 20% के साथ, मार्जिन के लिए बहुत सी जगह है, लेकिन पांचवें आइटम के लिए पर्याप्त जगह नहीं है।

स्रोत

2017-07-29 01:39:28

यह वास्तव में ** असली ** उत्तर है। उत्तरदायी, स्वच्छ और मान्य। – candlejack

<style type="text/css"> 
.parent{ 
    display: flex; 
    flex-wrap: wrap; 
} 
.parent .child{ 
    flex: 1 1 25%; 
} 
</style>  
<div class="parent"> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
    </div>

उम्मीद है कि यह मदद करता है। अधिक जानकारी के लिए आप इस link

स्रोत

2017-08-16 10:40:38

मुझे विश्वास है कि यह उदाहरण अधिक barebones और को समझने में आसान है @dowomenfart।

.child { 
    display: inline-block; 
    margin: 0 1em; 
    flex-grow: 1; 
    width: calc(25% - 2em); 
}

यह वही चौड़ाई गणना पूरा करता है, जबकि मांस के लिए सीधे काटने। गणित रास्ता आसान है और इसकी मापनीयता और मोबाइल-मित्रता के कारण emnew standard है।

स्रोत

2017-10-10 01:42:04

एम वास्तव में नया मानक नहीं है। यह गधे में दर्द हो सकता है, और डिजाइनर ईएम के दिमाग में डिजाइन नहीं करते हैं। –

फ्लेक्सबॉक्स: प्रति पंक्ति 4 आइटम

उत्तर

संबंधित मुद्दे