यहां तक ​​कि एक निश्चित आकार

Question

के साथ divs वितरित करें, मैं कुछ समान प्रश्नों के माध्यम से चला गया लेकिन उत्तर मेरे लिए काम नहीं करते थे।

मेरे पास कई divs हैं, और उनमें से प्रत्येक की 210px की निश्चित चौड़ाई है।

वे कंटेनर उपयोगकर्ता के स्क्रीन आकार के आधार पर आकार बदल सकते हैं। Divs को हर समय क्षैतिज रूप से दूरी पर होना चाहिए और यदि कोई स्थान नहीं है तो इसे divs की रेखा को दूसरी पंक्ति में भी तोड़ना चाहिए।

चीजों को और अधिक साफ़ करने के लिए, नीचे दिए गए आंकड़े देखें।

यह JS fiddle परिणाम मैं चाहता हूँ हासिल की है। लेकिन मैं नहीं देख सकता कि यह मेरे divs के लिए कैसे काम करेगा, जिसमें एक निश्चित चौड़ाई होनी चाहिए।

width: calc(100%/6); 

संपादित करें:

जे एस फिडल के साथ समस्या यह है कि स्क्रीन आकार है जब जहां यह जगह है, लेकिन नहीं एक और div फिट करने के लिए पर्याप्त जगह। इस मामले में, अंतिम div दाएं के करीब होना चाहिए।

Answer 1

Flexbox क्या आप space-around को justify-content (या space-between, अपने प्रस्तुतिकरण जरूरतों के आधार पर) द्वारा चाहते हैं कर सकते हैं। ब्राउज़र समर्थन और लगाकर पर जानकारी के लिए चेक caniuse.com

body{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:space-around; 
 
    margin:0; 
 
    padding:5px; 
 
} 
 
div{ 
 
    background:#000; 
 
    flex:0 0 210px; 
 
    height:210px; 
 
    margin:5px; 
 
    width:210px; 
 
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

: यहाँ एक त्वरित उदाहरण है।

Answer 2

http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

तो यहाँ एक लेख कैसे flexbox (जो कीड़े का एक बहुत के साथ आता है का उपयोग किए बिना दृश्य लेआउट प्राप्त करने के लिए और आप गहरे में गोता लगाने के लिए यह ब्राउज़रों में काम करने के लिए होता है समझा है लगातार - ब्राउज़र समर्थन अधिक खराब हो जाता है जब आप इसके शीर्ष पर सिंटैक्स के साथ टिंकर नहीं करते हैं, तो मान लीजिए: "कोई फ्लेक्सबॉक्स नहीं है!")।

हाथ में आपकी समस्या का हल flexbox बिना सुंदर सीधे आगे होगा:

.container { 
    padding: y%; /* by giving the container a percentage based padding, you will create a slowly upscaling container as screen-width increases */ 
} 

.box { 
    width: 210px; /* whyever they need a fixed width but ok, who knows */ 
    margin-right: x%; /* x should be replaced with a value that distributes your containers evenly across the screen and makes them wrap when needed. Fiddle with the value until it makes sense to you. */ 
} 

है कि इस मुद्दे को हल?

Answer 3

तो मैं गोली मार दी और सभी को विचार स्क्रीन करने के लिए देखें, flexbox यहाँ मदद करने के लिए है

#container { 
 
    margin:1em; 
 
    color:turquoise; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    border: solid; 
 
    padding:2vh; 
 
    align-items:center; 
 
    justify-content:space-between; 
 
} 
 
#container > div:before { 
 
    content:'boxe '; 
 
    padding-right:0.25em;; 
 
} 
 
#container > div { 
 
    display:flex; 
 
    
 
    align-items:center; 
 
    justify-content:center; 
 
    min-height:25vh; 
 
    border: solid; 
 
    margin:1vh 0; 
 
    width:400px; 
 
    min-width:calc(100vw/4); 
 
    max-width: 45%; 
 
    
 
}

<div id="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div>

codepen to play with

(मैं उम्मीद कर मेरी टिप्पणी वास्तव में के बारे में http://jsfiddle.net/bvgn46hu/108/ & http://jsfiddle.net/bvgn46hu/114/ से वापस फ़ीड गया था) बचाव के लिए