फ्लेक्सबॉक्स आइटम के बीच दूरी निर्धारित करने का बेहतर तरीका

Question

Flexbox आइटम मैं उपयोग कर रहा हूँ बीच की न्यूनतम दूरी सेट करने के लिए margin: 0 5pxपर .itemऔर margin: 0 -5pxकंटेनर पर। मेरे लिए यह एक हैक की तरह लगता है, लेकिन मुझे ऐसा करने का कोई बेहतर तरीका नहीं मिल रहा है।

उदाहरण

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Comments

यह एक हैक नहीं है - यह आइटम संरेखित करने के लिए इच्छित तरीकों में से एक है। हालांकि अन्य गुण हैं। देखें w3.org/TR/css3-flexbox/#alignment

— BoltClock

हाँ, मैं समझ रहा हूँ। लेकिन उदाहरण के लिए कॉलम-गैप प्रॉपर्टी है जो हमें कंटेनर से दूरी को नियंत्रित करने की क्षमता प्रदान करती है: w3.org/TR/css3-multicol/#column-gap

— साशा कोस

कारण यह फ्लेक्सबॉक्स का एक मार्जिन ढह गया है। अन्य प्रश्न का सही आवेग है [मैं फ्लेक्सबॉक्स में अंतिम मार्जिन को गिरने से कैसे रोक सकता हूं? ] ( stackoverflow.com/questions/38993170/… )

— जैक यांग

सीएसएस बॉक्स संरेखण मॉड्यूल स्तर 3 पर एक खंड शामिल बक्से के बीच अंतराल को बहु-स्तंभ तत्वों, पर लागू होता है जो - फ्लेक्स कंटेनर , और ग्रिड कंटेनरों। तो अंत में यह सरल होगा: row-gap: 5px- किया।

— डेनियल

@ जॉनकारेल फ़ायरफ़ॉक्स वास्तव में पहले से ही gapफ्लेक्स कंटेनर ( कैनीयूज़ ) पर संपत्ति का समर्थन करता है

— डेनियल

Answer 1

• फ्लेक्सबॉक्स में मार्जिन कम नहीं होता है।
• फ्लेक्सबॉक्स में border-spacingतालिकाओं के लिए कुछ भी नहीं है (सीएसएस संपत्ति को छोड़कर gapजो ज्यादातर ब्राउज़रों में अच्छी तरह से समर्थित नहीं है, कैनीयूज़ )

इसलिए जो आप मांग रहे हैं उसे हासिल करना थोड़ा और मुश्किल है।

मेरे अनुभव में, "सबसे साफ" तरीका जो किसी भी संशोधन के बिना उपयोग नहीं करता :first-child/ :last-childकरता flex-wrap:wrapहै padding:5pxऔर कंटेनर और margin:5pxबच्चों पर सेट करना है । यह 10pxप्रत्येक बच्चे और प्रत्येक बच्चे और उनके माता-पिता के बीच एक अंतर पैदा करेगा ।

डेमो

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Comments

यह एक ही बात को पूरा नहीं करता है क्योंकि सवाल पूछता है, आपके पास बाईं और दाईं ओर 10px इंडेंट होगा, जो मैं मान रहा हूं कि उनका इरादा नहीं है। इसलिए, मूल प्रश्न में नकारात्मक मार्जिन।

— क्रिस निकोला

अगर orderसंपत्ति सेट की जाए तो क्या होगा ? :first-child/:last-childअपेक्षा के अनुरूप काम नहीं होगा।

— गुरिया

"Flexbox हाशिये ढहने नहीं है।" बहुत ही व्यावहारिक, और जाहिरा तौर पर सच है, लेकिन क्या मैं एक प्रशस्ति पत्र मांग सकता हूं?

— १har:४० पर छारवे

क्या यह मूल प्रश्न से भी बदतर उत्तर नहीं है? इस पद्धति के लिए आवश्यक है कि आपके पास कंटेनर के चारों ओर जगह हो और नाली हमेशा एक समान संख्या में होनी चाहिए।

— limitlessloop

@ whar.org, कल्पना w3.org/TR/css-flexbox-1/#item-margins से , "आसन्न फ्लेक्स आइटम के मार्जिन में गिरावट नहीं होती है।"

— रोमेल्म

Answer 2

यह कोई हैक नहीं है। बूटस्ट्रैप और उसके ग्रिड द्वारा भी इसी तकनीक का उपयोग किया जाता है, हालांकि, मार्जिन के बजाय, बूटस्ट्रैप अपने क्षेत्र के लिए पैडिंग का उपयोग करता है।

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

Comments

इस पद्धति का एकमात्र मुद्दा पृष्ठभूमि रंगों के साथ समान ऊंचाई की वस्तुओं को बनाए रखना है। height:100%; width:100%आइटम की पैडिंग को नजरअंदाज करने के साथ पूर्ण स्थिति ।

— स्टीवन वाचोन

यहाँ समस्या IE10 और 11. flex-basisमानों के साथ है box-sizing: border-box, इसलिए किसी भी गद्दी या सीमा वाले बच्चे को माता-पिता (या इस मामले में लपेटना) से बाहर निकल जाएगा। स्रोत

— कार्सन

इस दृष्टिकोण के साथ एक और समस्या है: मार्जिन को इस तरह समायोजित करना पृष्ठ की चौड़ाई का विस्तार कर सकता है। डेमो: jsfiddle.net/a97tatf6/1

— नाथन उस्मान

हालांकि मैं मानता हूं कि यह हैक नहीं है, इस तथ्य का कि कुछ व्यापक रूप से उपयोग किया जाता है इसका मतलब यह नहीं है कि यह हैक नहीं है। Polyfills, अस्थायी सुरक्षा पैच, हेक्स संपादन, आदि देखें

— विलियम

बेशक यह एक हैक है। क्योंकि बूटस्ट्रैप इस विधि का उपयोग करता है इसका मतलब यह नहीं है कि यह हैक नहीं है। इसका सीधा सा मतलब है कि बूटस्ट्रैप एक हैक का उपयोग करता है।

— माइकल बेंजामिन

Answer 3

फ्लेक्सबॉक्स और सीएसएस कैल्क कई पंक्तियों के समर्थन के साथ

नमस्कार, फ्लेक्सबॉक्स का समर्थन करने वाले सभी ब्राउज़रों के लिए नीचे मेरा कार्य समाधान है। कोई नकारात्मक मार्जिन नहीं।

फिडल डेमो

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > div:nth-child(3n) {
  margin-right: 0;
}

.flexbox::after {
  content: '';
  flex: auto;
}

/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > div:nth-child(-n+3) {
  margin-top: 0;
}

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

ध्यान दें कि यह कोड SASS का उपयोग करके कम हो सकता है

अद्यतन 2020.II.11 बाईं ओर अंतिम पंक्ति पर स्तंभों को संरेखित करें

अंतिम पंक्ति में 2020.II.14 हटाए गए मार्जिन-अपडेट को अपडेट करें

Comments

मुझे यह समाधान पसंद है लेकिन यह विफल रहता है अगर अंतिम पंक्ति में केवल 2 आइटम हैं। आइटम एक साथ होने के कारण ढेर नहीं हैं justify-content।

— जेम्स ब्रेल्ली

दो आइटम समस्या को ठीक करने के लिए justify-content: space-evenly;या तो बदलें justify-content: space-around;।

— पॉल रूनी

@PaRRooney कई सूचियों वाली साइट पर आप हमेशा आइटमों की संख्या को नहीं जान सकते हैं, यदि सूची सीएमएस द्वारा बनाई गई हैं।

— निंजा फार्ट

@ 1.21gigawatts कृपया किसी और के कोड / उत्तर के लिए मनमाना परिवर्तन न करें; इसके बजाय अपना जवाब लिखें।

— टायलरएच

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

— 1.21 गीगावाट

Answer 4

आप पारदर्शी सीमाओं का उपयोग कर सकते हैं।

मैंने एक फ्लेक्स ग्रिड मॉडल बनाने की कोशिश करते समय इस मुद्दे पर विचार किया है जो पुराने ब्राउज़रों के लिए एक टेबल + टेबल-सेल मॉडल पर वापस आ सकता है। और कॉलम गटर के लिए बॉर्डर मुझे सबसे अच्छा विकल्प लगता था। यानी टेबल-सेल में मार्जिन नहीं है।

जैसे

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

यह भी ध्यान दें कि आपको min-width: 50px;flexbox की आवश्यकता है। फ्लेक्स मॉडल तब तक निश्चित आकारों को संभाल नहीं सकता है जब तक कि आप flex: none;उस विशेष बाल तत्व पर नहीं चलते हैं जिसे आप तय करते हैं और इसलिए इसे बाहर रखा गया है "flexi"। http://jsfiddle.net/GLpUp/4/ लेकिन साथ में सभी कॉलम flex:none;अब एक फ्लेक्स मॉडल नहीं है। यहाँ एक फ्लेक्स मॉडल के करीब कुछ है: http://jsfiddle.net/GLpUp/5/

तो आप वास्तव में मार्जिन का उपयोग कर सकते हैं यदि आपको पुराने ब्राउज़रों के लिए टेबल-सेल कमबैक की आवश्यकता नहीं है। http://jsfiddle.net/GLpUp/3/

background-clip: padding-box;पृष्ठभूमि का उपयोग करते समय सेटिंग आवश्यक होगी, अन्यथा पृष्ठभूमि पारदर्शी सीमा क्षेत्र में बह जाएगी।

Comments

बहुत बढ़िया जवाब। फ्लेक्सबॉक्स के (जैसे अतिरिक्त स्थान को अवशोषित करने के लिए) मार्जिन का उपयोग अलग-अलग किया जाता है, इसलिए पारदर्शी सीमाएं समान रूप से

— स्थानित

जब आप पृष्ठभूमि रंग का उपयोग करते हैं, तब आपकी पृष्ठभूमि आपके इच्छित सीमा से अधिक होती है।

— एहनबीकैड

@ahnbizcad विभिन्न पृष्ठभूमि रंगों के साथ, आप सफेद या पर्याप्त रंग का उपयोग कर सकते हैं जिसके आधार पर पृष्ठभूमि है।

— हेक्सालिस

@ahnbizcad: यदि आपको IE8 समर्थन की आवश्यकता नहीं है, तो यह एक बेहतर उपाय है:background-clip: padding-box

— Albin

यहाँ पर अल्बिन की टिप्पणी को अधिक वोटों की आवश्यकता है! यह सबसे अच्छा उपाय है। पारदर्शी सीमाएँ, पृष्ठभूमि-क्लिप के संयोजन में: पैडिंग-बॉक्स (और कंटेनर पर नकारात्मक मार्जिन, यदि आवश्यक हो, उचित बढ़त संरेखण के लिए) एक सही समाधान है। IE8 वैसे भी फ्लेक्सबॉक्स का समर्थन नहीं करता है, इसलिए पृष्ठभूमि-क्लिप के लिए समर्थन की कमी से कोई फर्क नहीं पड़ता।

— ब्रायन

Answer 5

यह समाधान सभी मामलों के लिए काम करेगा, भले ही कई पंक्तियाँ हों या कितने भी तत्व हों। लेकिन अनुभाग की गिनती वही होनी चाहिए जो आप पहली पंक्ति में 4 चाहते हैं और 3 दूसरी पंक्ति है, यह उस तरह से काम नहीं करेगा जिस तरह से 4 के कंटेंट के लिए जगह खाली होगी, कंटेनर नहीं भरेगा।

हम प्रयोग कर रहे हैं display: grid; और इसके गुण।

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

इस विधि का नकारात्मक पक्ष मोबाइल ओपेरा मिनी में समर्थित नहीं होगा और पीसी में यह IE10 के बाद ही काम करता है ।

IE11 सहित पूर्ण ब्राउज़र संगतता के लिए नोट कृपया ऑटोप्रेफ़िक्सर का उपयोग करें

---

पुराने ANSWER

इसे एक पुराने समाधान के रूप में न सोचें, यह अभी भी सबसे अच्छा है यदि आप केवल तत्वों की एक पंक्ति चाहते हैं और यह सभी ब्राउज़रों के साथ काम करेगा।

इस पद्धति का उपयोग CSS सिबलिंग संयोजन द्वारा किया जाता है , इसलिए आप इसे कई अन्य तरीकों से भी जोड़ तोड़ कर सकते हैं, लेकिन यदि आपका संयोजन गलत है, तो यह समस्याएँ भी पैदा कर सकता है।

.item+.item{
  margin-left: 5px;
}

नीचे दिया गया कोड ट्रिक करेगा। इस विधि में, देने के लिए कोई जरूरत नहीं है margin: 0 -5px;करने के लिए #boxआवरण।

आपके लिए एक काम का नमूना:

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Comments

मैंने आपके ग्रिड-आधारित उत्तर को यह प्रदर्शित करने के लिए संपादित किया है कि यह सही ढंग से काम करता है, भले ही अंतिम पंक्ति में कम आइटम हों। यह साबित करने के लिए उस मामले में काम करता है। (यदि आप इस बदलाव को पसंद नहीं करते हैं तो बेझिझक वापसी करें।)

— टूलमेकरसैट

इस प्रश्न के अनुसार, उन्होंने केवल हैक के बिना बाल तत्वों के साथ अंतरिक्ष को ठीक से भरने के लिए कहा है, कि मैंने क्या किया, ग्रिड का उपयोग करके हम प्रबंधन कर सकते हैं जैसा कि grid-template-columnsहम गतिशील रूप से परिभाषित नहीं करते हैं। इसलिए यदि आप मूल्य देते हैं 1fr 1fr 1fr 1frतो यह div को विभाजित करेगा 4fractionsऔर प्रत्येक बच्चे के तत्वों को भरने का प्रयास करेगा fractions, मेरी जानकारी में एकमात्र तरीका है grid। मैंने उत्तर में जो बताया है वह यह है कि अगर उपयोगकर्ता को div को 4 में विभाजित करने और कई पंक्तियों के साथ कई तत्वों के साथ उपयोग करने की आवश्यकता है, तो gidयह मदद करेगा।

— weBBer

Answer 6

& > * + *एक flex-gap(एक पंक्ति के लिए) का अनुकरण करने के लिए आप चयनकर्ता के रूप में उपयोग कर सकते हैं :

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}

<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

यदि आपको फ्लेक्स रैपिंग का समर्थन करने की आवश्यकता है , तो आप एक रैपर तत्व का उपयोग कर सकते हैं:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>

Comments

साफ समाधान। फ्लेक्स बाल तत्वों की किसी भी संख्या के लिए काम करता है।

— कोनराड गौल्ज़ोस्की

यह वही था जो मैं देख रहा था और मेरे लिए बहुत अच्छा काम किया

— Paul

एक बिंदु पर ध्यान दें, हालांकि यह है कि *ऑपरेटर विशिष्टता को नहीं बढ़ाता है जैसा कि आप उम्मीद कर सकते हैं। इसलिए आपके एक्ज़िटिंग सीएसएस के आधार पर आपको .flex > *चयनकर्ता पर विशिष्टता बढ़ाने या !importantनियम में जोड़ने की आवश्यकता हो सकती है यदि उस तत्व में मार्जिन का चयन करने वाले अन्य चयनकर्ता हैं।

— पॉल ओडोन

सबसे अच्छा समाधान solution

— o01

Answer 7

मान लें कि यदि आप 10pxआइटम के बीच स्थान सेट करना चाहते हैं , तो आप बस .item {margin-right:10px;}सभी के लिए सेट कर सकते हैं , और इसे अंतिम पर रीसेट कर सकते हैं.item:last-child {margin-right:0;}

आप सामान्य सिबलिंग ~या अगले +सिबलिंग सिलेक्टर का .item ~ .item {margin-left:10px;}उपयोग पहले वाले या उपयोग को छोड़कर आइटम पर लेफ्ट मार्जिन सेट करने के लिए भी कर सकते हैं.item:not(:last-child) {margin-right: 10px;}

फ्लेक्सबॉक्स इतना चालाक है कि यह स्वचालित रूप से पुनर्गणना करता है और ग्रिड को समान रूप से वितरित करता है।

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

यदि आप फ्लेक्स रैप की अनुमति देना चाहते हैं , तो निम्न उदाहरण देखें।

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Comments

यह काम नहीं करेगा यदि आइटम लिपटे हुए हैं, क्योंकि :last-childलाइन के अंत में हर आखिरी बच्चे को प्रभावित नहीं करता है, सही है?

— फ्लिम

@ फ़ीलम ने फ्लेक्स रैप के साथ काम करने के लिए एक दृष्टिकोण जोड़ा, ऊपर का दूसरा भाग देखें।

— स्टिकर

मेरे लिए सबसे अच्छा जवाब ... सरल, स्वच्छ, कुशल! फ्लेक्स रैप के साथ पूरी तरह से काम करते हुए, धन्यवाद

— Matthieu Marcé

Answer 8

मुझे एक समाधान मिला है जो सामान्य भाई-बहन के चयनकर्ता पर आधारित है ~, और अनंत घोंसले के शिकार की अनुमति देता है।

एक कार्य उदाहरण के लिए इस कोड पेन को देखें

मूल रूप से, कॉलम कंटेनरों के अंदर, प्रत्येक बच्चे को जो दूसरे बच्चे से पहले होता है उसे एक शीर्ष मार्जिन मिलता है। इसी तरह, हर पंक्ति के कंटेनर के अंदर, प्रत्येक बच्चे को जो दूसरे से पहले होता है उसे एक बाएं मार्जिन मिलता है।

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}

<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>

Comments

इसके परिणामस्वरूप विभिन्न आकार की वस्तुओं के मार्जिन विश्व स्तर पर लागू नहीं होने के कारण होता है।

— स्टीवन वचोन

आपको छोटी स्क्रीन को संभालने के लिए कुछ अतिरिक्त CSS जोड़ने की आवश्यकता होगी क्योंकि यह मोबाइल पर थोड़ा अजीब लगता है। मैं बड़ी स्क्रीन के लिए .box ~ .box नियम लागू करूँगा और छोटी स्क्रीन के लिए .box वर्ग को अधिकतम-चौड़ाई निर्धारित करने के लिए सेट करूँगा। 100% और एक मार्जिन के नीचे।

— rhysclay

Answer 9

आरी के जवाब से आगे बढ़ते हुए, यहां थोड़ा सुधार हुआ संस्करण है जो आपको आसपास के मार्जिन के बिना आइटम के बीच एक निश्चित रिक्ति सेट करने की अनुमति देता है।

http://jsfiddle.net/chris00/s52wmgtq/49/

इसके अलावा सफारी "-webkit- फ्लेक्स" संस्करण भी शामिल है।

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

Comments

क्या यह अनिवार्य रूप से प्रश्न में दिए गए उदाहरण के समान नहीं है?

— ford

Answer 10

#ChromDevSummit के अनुसार, फ्लेक्सबॉक्स केgap लिए संपत्ति का कार्यान्वयन है , हालांकि इस समय (14 नवंबर 2019) यह केवल फ़ायरफ़ॉक्स में समर्थित है, लेकिन जल्द ही क्रोम में लागू किया जाना चाहिए:

लाइव डेमो

Chrome को भी मिलते ही मैं अपने उत्तर को अपडेट कर दूंगा।

Answer 11

मैंने इसे लिपटे और निश्चित चौड़ाई के कॉलम के लिए उपयोग किया है। यहाँ कुंजी हैcalc()

SCSS नमूना

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

पूर्ण कोडपेन नमूना

Comments

यह अभी भी पहले और आखिरी आइटम से पहले एक गटर जोड़ता है, जो ओपी नकारात्मक मार्जिन का उपयोग करने से रोकता है।

— हरमन

Flexbox IE 11 में "फ्लेक्स" आइटम के अंदर कैल्क () का समर्थन नहीं करता है

— एडम ýipický

खिचड़ी हमेशा इस्तेमाल की जाती है। कल्पना कीजिए कि अगर सीधी ठिठुरन के लिए भी बॉर्डर की जरूरत है

— एंड्रीस

Answer 12

एक फ्लेक्स कंटेनर के साथ -x (नकारात्मक) मार्जिन और फ्लेक्स आइटम के साथ एक्स (सकारात्मक) मार्जिन या पैडिंग वांछित दृश्य परिणाम पर ले जाने: फ्लेक्स आइटम एक है 2x की तय की खाई को केवल के बीच एक दूसरे को।

यह केवल प्राथमिकता का विषय प्रतीत होता है, चाहे फ्लेक्स आइटम पर मार्जिन या पैडिंग का उपयोग करना हो।

इस उदाहरण में, फ्लेक्स आइटम को निश्चित अंतराल को संरक्षित करने के लिए गतिशील रूप से बढ़ाया जाता है:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

Comments

क्षमा करें, मुझे यह नहीं मिला। आपका जवाब क्या नया परिचय देता है जो सीधे सवाल में नहीं कहा गया है?

— उपयोगकर्ता

सबसे पहले, मैं चाहता हूं कि दोनों, मार्जिन और फ्लेक्स-आइटम पर पैडिंग वांछित परिणाम के लिए नेतृत्व करें, क्योंकि मौजूदा उत्तर केवल एक या दूसरे का उल्लेख करते हैं। दूसरे, मैं एक उदाहरण देना चाहता था, जहां स्वयं फ्लेक्स-आइटम स्केल करके अंतराल को संरक्षित किया जाता है।

— टिम

इस प्रभाव को दिखाने वाला एक कोडपैन उदाहरण है। codepen.io/dalgard/pen/Dbnus

— पैडलपेट

Answer 13

आखिरकार वे gapसंपत्ति को फ्लेक्सबॉक्स में जोड़ देंगे। तब तक आप सीएसएस ग्रिड का उपयोग कर सकते हैं जिसके बजाय पहले से ही gapसंपत्ति है, और बस एक पंक्ति है। मार्जिन से निपटने की तुलना में अच्छे।

Comments

यहां चर्चा: github.com/w3c/csswg-drafts/issues/1696 - वे सीएसएस ग्रिड, फ्लेक्सबॉक्स और सीएसएस कॉलम में नामकरण को भी सुव्यवस्थित करेंगे।

— फ्रैंक ल्मेर

Answer 14

सीएसएस gap संपत्ति:

मल्टी-कॉलम, फ्लेक्सबॉक्स और ग्रिड लेआउट के लिए एक नई gapसीएसएस संपत्ति है जो अब कुछ ब्राउज़रों में काम करती है! (क्या मैं लिंक 1 का उपयोग कर सकता हूं ? लिंक 2 )।

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

लेखन के रूप में, यह केवल फ़ायरफ़ॉक्स में उदासी से काम करता है। यदि आप "प्रयोगात्मक वेब प्लेटफ़ॉर्म सक्षम करें" सक्षम करते हैं तो यह वर्तमान में Chrome में काम करता है about:flags।

Answer 15

फ्लेक्सबॉक्स का उपयोग अपने समाधान में मैंने justify-contentमूल तत्व (कंटेनर) के लिए संपत्ति का उपयोग किया है और मैंने flex-basisवस्तुओं की संपत्ति के अंदर मार्जिन निर्दिष्ट किया है । नीचे दिए गए कोड स्निपेट की जांच करें:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}

<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>

Answer 16

फ्लेक्सबॉक्स के साथ, गटर बनाना एक दर्द है, खासकर जब लपेटना शामिल होता है।

आपको नकारात्मक मार्जिन का उपयोग करने की आवश्यकता है ( जैसा कि प्रश्न में दिखाया गया है ):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... या HTML को बदल दें ( जैसा कि दूसरे उत्तर में दिखाया गया है ):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... या कुछ और।

किसी भी मामले में, आपको इसे काम करने के लिए एक बदसूरत हैक की आवश्यकता है क्योंकि फ्लेक्सबॉक्स एक " flex-gap" सुविधा ( अभी के लिए कम से कम ) प्रदान नहीं करता है ।

गटर का मुद्दा, हालांकि, सीएसएस ग्रिड लेआउट के साथ सरल और आसान है।

ग्रिड कल्पना ऐसे गुण प्रदान करती है जो ग्रिड और कंटेनर के बीच की जगह की अनदेखी करते हुए ग्रिड आइटम के बीच जगह बनाते हैं। ये गुण हैं:

• grid-column-gap
• grid-row-gap
• grid-gap (उपरोक्त दोनों गुणों के लिए आशुलिपि)

हाल ही में, सीएसएस बॉक्स संरेखण मॉड्यूल के अनुरूप करने के लिए कल्पना को अद्यतन किया गया है , जो प्रत्येक बॉक्स मॉडल में उपयोग के लिए संरेखण गुणों का एक सेट प्रदान करता है। तो अब गुण हैं:

• column-gap
• row-gap
• gap (संक्षेप)

हालांकि, सभी ग्रिड-समर्थक ब्राउज़र नहीं हैं नए गुणों का समर्थन नहीं करते हैं, इसलिए मैं नीचे दिए गए डेमो में मूल संस्करणों का उपयोग करूंगा।

इसके अलावा, यदि आइटम और कंटेनर के बीच रिक्ति की आवश्यकता है, padding ठीक काम करता है (नीचे डेमो में तीसरा उदाहरण देखें)।

कल्पना से:

10.1। गटर: row-gap, column-gap, और gap गुण

row-gapऔर column-gapगुण (और उनके gapआशुलिपि), जब एक ग्रिड कंटेनर पर निर्दिष्ट, ग्रिड पंक्तियों और ग्रिड स्तंभों के बीच गटर परिभाषित करते हैं। उनके सिंटैक्स को CSS Box Alignment 3 aps8 Gaps For Boxes में परिभाषित किया गया है ।

इन गुणों का प्रभाव ऐसा है कि प्रभावित ग्रिड लाइनों ने मोटाई हासिल कर ली है: दो ग्रिड लाइनों के बीच ग्रिड ट्रैक गटरों के बीच का स्थान है जो उनका प्रतिनिधित्व करता है।

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}

<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

अधिक जानकारी:

• सीएसएस ग्रिड के लिए ब्राउज़र समर्थन
• केवल फ्लेक्स-आइटम (चर्चा) के बीच लागू होने वाले मार्जिन को परिभाषित करना आसान बनाएं
• Flexbox आइटम के बीच अंतर

Answer 17

ऐसा क्यों नहीं है:

.item + .item {
    margin-left: 5px;
}

यह आसन्न सिबलिंग चयनकर्ता का उपयोग करता है , सभी .itemतत्वों को देने के लिए , पहले एक को छोड़कर margin-left। फ्लेक्सबॉक्स के लिए धन्यवाद, यह समान रूप से व्यापक तत्वों में परिणत होता है। यह ऊर्ध्वाधर रूप से तैनात तत्वों के साथ भी किया जा सकता है और margin-topनिश्चित रूप से।

Comments

यह तब तक काम करेगा जब तक कि फ्लेक्स आइटम हमेशा एक पंक्ति में हों। यदि रैपिंग की अनुमति है, तो यह संभवतः पर्याप्त नहीं होगा।

— निक एफ

Answer 18

यहाँ मेरा समाधान है, कि बाल तत्वों पर किसी भी वर्ग को स्थापित करने की आवश्यकता नहीं है:

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

उपयोग:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

समान तकनीक का उपयोग ऊपर दिए गए इनलाइन उदाहरण के अलावा सामान्य फ्लेक्स पंक्तियों और स्तंभों के लिए किया जा सकता है, और 4px के अलावा अन्य के लिए कक्षाओं के साथ विस्तारित किया जा सकता है।

Answer 19

मैं अक्सर ऐसे मामलों के लिए + ऑपरेटर का उपयोग करता हूं

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Answer 20

मुझे लगता है कि ऐसा करने का सबसे आसान तरीका प्रतिशत है और बस मार्जिन को आपकी चौड़ाई को बढ़ाने की अनुमति देता है

इसका मतलब है कि यदि आप अपने उदाहरण का उपयोग कर रहे हैं तो आप कुछ इस तरह से समाप्त करते हैं

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

क्या इसका मतलब यह है कि आपके मूल्य चौड़ाई पर आधारित हैं, जो हर किसी के लिए अच्छा नहीं हो सकता है।

Comments

बस इस समाधान के पार आया और हाँ, यह बहुत अच्छा है। मेरे मामले में काम करता है, कम से कम (उन लोगों के लिए एक कलम जो इसे दिलचस्प लग सकता है: codepen.io/rishatmuhametshin/pen/XXjpaV )।

— रिछात

Answer 21

यहाँ लचीले बॉक्स का उपयोग करके रिक्ति के साथ कार्ड यूआई तत्वों का एक ग्रिड है:

मैं iffy परिणामों के साथ पैडिंग और मार्जिन में हेरफेर करके कार्डों को मैन्युअल रूप से बदलने से निराश था। तो यहाँ सीएसएस विशेषताओं का संयोजन मुझे बहुत प्रभावी लगा है:

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}

<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

आशा है कि यह लोगों, वर्तमान और भविष्य में मदद करता है।

Comments

अपडेट: यह रिक्ति उन मोबाइल रेंडरिंग HTML तत्वों के लिए प्रभावी है जिन्हें एक निश्चित संरेखण (जैसे केंद्र, बाएं, आदि) की आवश्यकता होती है। यदि आप अपने आप को मोबाइल विकास के लिए फ्लेक्स बॉक्स का उपयोग करते हुए पाते हैं, तो मुझे विशुद्ध रूप से मार्जिन-आधारित संरेखण पर स्विच करने में राहत मिली है।

— 13

Answer 22

कॉलम - एन कॉलम के लिए एक एकल वर्ग

फ्लेक्सबॉक्स और एससीएसएस

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

फ्लेक्सबॉक्स और सीएसएस

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}

<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

JSFiddle पर इसके साथ खेलें ।

Answer 23

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}

<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Answer 24

बस .item + .itemदूसरे से मैच करने के लिए चयनकर्ता में उपयोग करें.item

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Answer 25

मान लिया जाये कि:

• आप रैपिंग के साथ 4 कॉलम ग्रिड लेआउट चाहते हैं
• वस्तुओं की संख्या आवश्यक रूप से 4 की संख्या से अधिक नहीं है

1, 5 वें, 9 वें आइटम और इतने पर छोड़कर हर आइटम पर एक बाएं मार्जिन सेट करें; और प्रत्येक आइटम पर निर्धारित चौड़ाई निर्धारित करें। यदि बायां मार्जिन 10px है, तो प्रत्येक पंक्ति में 4 आइटमों के बीच 30px मार्जिन होगा, आइटम की प्रतिशत चौड़ाई की गणना निम्नानुसार की जा सकती है:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

यह फ्लेक्सबॉक्स की अंतिम पंक्ति से जुड़े मुद्दों के लिए एक अच्छा समाधान है।

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Answer 26

ऐसा करने के लिए वास्तव में एक अच्छा, सुव्यवस्थित, सीएसएस-ही तरीका है (कि कोई "बेहतर" विचार कर सकता है)।

यहां पोस्ट किए गए सभी उत्तरों में से, मुझे केवल एक मिला जो कैल्क () का सफलतापूर्वक उपयोग करता है (डेरियस सिकोरस्की द्वारा)। लेकिन जब इसके साथ पेश किया जाता है: "लेकिन यह विफल रहता है यदि अंतिम पंक्ति में केवल 2 आइटम हैं" तो कोई समाधान विस्तारित नहीं हुआ था।

यह समाधान नकारात्मक हाशिये के विकल्प के साथ ओपी के प्रश्न को संबोधित करता है और डेरियस को बताई गई समस्या का समाधान करता है।

टिप्पणियाँ:

• यह उदाहरण केवल 3-कॉलम लेआउट को प्रदर्शित करता है
• यह calc()ब्राउज़र को गणित करने के लिए उपयोग करता है जिस तरह से वह चाहता है - 100%/3 (हालांकि 33.3333% के रूप में अच्छी तरह से काम करना चाहिए) , और (1em/3)*2 (हालांकि .66em को भी अच्छी तरह से काम करना चाहिए) ।
• ::afterयदि स्तंभों की तुलना में कम तत्व हैं तो यह अंतिम पंक्ति को पैड करने के लिए उपयोग करता है

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}

<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

इसके अलावा https://codepen.io/anon/pen/rqWagE पर

Answer 27

आप नई संपत्ति का उपयोग कर सकते हैं gap। मैं इस लेख में पाई गई व्याख्या , साथ ही अधिक जानकारी को कॉपी करता हूं

सीएसएस ग्रिड लेआउट में कुछ समय के लिए गैप (पहले ग्रिड-गैप) रहा है। बाल तत्वों के चारों ओर रिक्ति के बजाय एक तत्व के आंतरिक रिक्ति को निर्दिष्ट करके, गैप कई सामान्य लेआउट मुद्दों को हल करता है। उदाहरण के लिए, अंतर के साथ, आपको बाल तत्वों पर मार्जिन के बारे में चिंता करने की ज़रूरत नहीं है, जिसमें एक तत्व के किनारों के आसपास अवांछित व्हाट्सएप पैदा होता है:

दुर्भाग्य से अभी, फ्लेक्स लेआउट में केवल फायरफॉक्स अंतर का समर्थन करता है।

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

section {
  width: 30vw;
  
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  
  &[flex] {
    display: flex;
    flex-wrap: wrap;
  }
  
  margin-bottom: 3rem;
}

.tag {
  color: white;
  background: hsl(265 100% 47%);
  padding: .5rem 1rem;
  border-radius: 1rem;
}

button {
  display: inline-flex;
  place-items: center;
  gap: .5rem;
  background: hsl(265 100% 47%);
  border: 1px solid hsl(265 100% 67%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.25rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<section>
  <h1>Grid</h1> 
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>
<br>
<section flex>
  <h1>Flex</h1>
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>

Comments

gapstackoverflow.com/a/58041749/2756409 पर पहले से ही एक उत्तर में सिफारिश की गई थी , यह सीएसएस नहीं है।

— टाइलर

Answer 28

यह हर मामले में काम नहीं करेगा, लेकिन यदि आपके पास लचीली बाल चौड़ाई (%) है और प्रति पंक्ति वस्तुओं की संख्या पता है, तो आप nth-childचयनकर्ता / एस का उपयोग करके आवश्यक तत्वों के मार्जिन को बहुत सफाई से निर्दिष्ट कर सकते हैं ।

यह बहुत हद तक इस बात पर निर्भर करता है कि आप "बेहतर" से क्या मतलब है। इस तरह से बाल तत्वों या नकारात्मक तत्वों के लिए अतिरिक्त आवरण मार्कअप की आवश्यकता नहीं होती है - लेकिन उन चीजों में दोनों का स्थान होता है।

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}

<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>

Comments

उत्तरदायी नहीं है। केवल निश्चित चौड़ाई वाले माता-पिता के लिए काम करता है।

— ग्रीन

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

— jnmrobinson

Answer 29

मैं पहले इसी मुद्दे पर आया था, फिर इसके लिए जवाब पर ठोकर खाई। आशा है कि यह भविष्य में संदर्भ के लिए दूसरों की मदद करेगा।

लंबा उत्तर छोटा, अपने बच्चे को फ्लेक्स-आइटम में एक सीमा जोड़ें। फिर आप फ्लेक्स-आइटम के बीच मार्जिन को निर्दिष्ट कर सकते हैं जो आपको पसंद है। स्निपेट में, मैं उदाहरण प्रयोजनों के लिए काले रंग का उपयोग करता हूं, आप चाहें तो 'पारदर्शी' का उपयोग कर सकते हैं।

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>

Answer 30

बॉक्स कंटेनर पर नकारात्मक मार्जिन ट्रिक बस बढ़िया काम करती है। यहाँ एक और उदाहरण है कि आदेश के साथ काम करना, लपेटना और क्या नहीं।

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}

<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>