मल्टी-लाइन फ्लेक्सबॉक्स लेआउट में लाइन ब्रेक कैसे निर्दिष्ट करें?

Question

वहाँ कई लाइन flexbox में एक लाइन ब्रेक बनाने के लिए एक रास्ता है?

इस CodePen में प्रत्येक 3 आइटम के बाद तोड़ने के लिए उदाहरण के लिए ।

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) {
  background: silver;
}

<div class="container">
  <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 class="item">10</div>
</div>

पसंद

.item:nth-child(3n){
  /* line-break: after; */    
}

Comments

मुझे वही या बहुत ही समान समस्या थी; मैं हर चौथे आइटम को तोड़ना चाहता था इसलिए मैंने प्रत्येक फ्लेक्स आइटम की चौड़ाई को 25vw (या 25%) पर सेट किया। तो आपके मामले में, प्रत्येक 3 आइटम के लिए आप 33.3vw (या 33.3%) का उपयोग करेंगे। मैं जो चाहता था, उसके लिए पूरी तरह से काम किया। यदि वे एक सरल विधि की तलाश में हैं तो किसी और की मदद कर सकते हैं।

— बेन क्लार्क

बेन क्लार्क! आपको बहुत - बहुत धन्यवाद! आपका उत्तर केवल वही है जो काम किया है। आप इसे उत्तर के रूप में जोड़ने पर विचार कर सकते हैं। :-)

— itmuckel

संबंधित: stackoverflow.com/q/4609279/405017

— मेंढक

Answer 1

सबसे सरल और सबसे विश्वसनीय समाधान सही स्थानों पर फ्लेक्स आइटम सम्मिलित करना है। यदि वे पर्याप्त चौड़े हैं ( width: 100%), तो वे एक लाइन ब्रेक को मजबूर करेंगे।

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

लेकिन यह बदसूरत है और शब्दार्थ नहीं है। इसके बजाय, हम फ्लेक्स कंटेनर के अंदर छद्म तत्व उत्पन्न कर सकते हैं, और orderउन्हें सही स्थानों पर ले जाने के लिए उपयोग कर सकते हैं।

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  background: silver;
}
.container::before, .container::after {
  content: '';
  width: 100%;
  order: 1;
}
.item:nth-child(n + 4) {
  order: 1;
}
.item:nth-child(n + 7) {
  order: 2;
}

<div class="container">
  <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>

लेकिन एक सीमा है: फ्लेक्स कंटेनर में केवल एक ::beforeऔर एक ::afterछद्म तत्व हो सकता है। इसका मतलब है कि आप केवल 2 लाइन ब्रेक को मजबूर कर सकते हैं।

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

लेकिन सौभाग्य से, सीएसएस डिस्प्ले L3 पेश किया है display: contents(वर्तमान में केवल फ़ायरफ़ॉक्स 37 द्वारा समर्थित):

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

तो आप display: contentsफ्लेक्स कंटेनर के बच्चों के लिए आवेदन कर सकते हैं , और प्रत्येक को एक अतिरिक्त आवरण के अंदर लपेट सकते हैं। फिर, फ्लेक्स आइटम उन अतिरिक्त आवरण और बच्चों के छद्म तत्व होंगे।

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  display: contents;
}
.item > div {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) > div {
  background: silver;
}
.item:nth-child(3n)::after {
  content: '';
  width: 100%;
}

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

वैकल्पिक रूप से, के अनुसार विखंडन फ्लेक्स लेआउट और सीएसएस विखंडन , flexbox टूट जाता है का उपयोग करके मजबूर की अनुमति देता है break-before, break-afterया उनके सीएसएस 2.1 उपनाम:

.item:nth-child(3n) {
  page-break-after: always; /* CSS 2.1 syntax */
  break-after: always; /* New syntax */
}

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  page-break-after: always;
  background: silver;
}

<div class="container">
  <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 class="item">10</div>
</div>

फ्लेक्सबॉक्स में मजबूर लाइन ब्रेक अभी तक व्यापक रूप से समर्थित नहीं हैं, लेकिन यह फ़ायरफ़ॉक्स पर काम करता है।

Comments

@ nacho4d क्योंकि HTML को स्टाइल के उद्देश्यों के लिए संशोधित नहीं किया जाना चाहिए। और यदि आप अपना दिमाग बदलते हैं और यह निर्णय लेते हैं कि आप 3 के बजाय 4 कॉलम चाहते हैं, तो आपको बहुत सारे HTML को संशोधित करना होगा। break-afterसमाधान के साथ तुलना करें , जिसे केवल स्टाइलशीट में एक चयनकर्ता को संशोधित करने की आवश्यकता होगी।

— ओरोल

मुझे IE में समाधान नंबर दो कार्य display: block;करने के लिए .container ::beforeऔर ::afterछद्म वर्गों को जोड़ने की आवश्यकता थी । YMMV!

— मुकर्रर

@ वॉट अजीब है, क्योंकि फ्लेक्स आइटम को स्वचालित रूप से अवरुद्ध किया जाना चाहिए।

— ओरिऑल

चूँकि पेज-ब्रेक की चीज़ को स्पष्ट रूप से कल्पना से हटा दिया गया था, क्या आपके दूसरे स्निपेट को कॉलम दिशा में चलाना संभव है और क्या इसके कंटेनर की ऊँचाई का विस्तार नहीं हुआ है? मेरे पास कोई भाग्य नहीं था और फ्लेक्स-बेस को 100% / आइटम पर सेट करना इसकी ऊंचाई को बढ़ाता है।

— ल्यूसेंट

आपका दूसरा सुझाव IE10 में काम नहीं करता है। IE11 और मेरे द्वारा परीक्षण किए गए अन्य सभी ब्राउज़र ठीक हैं, लेकिन IE10 छद्म तत्वों के आदेश की उपेक्षा करता है।

— एलेक्स पॉडवोर्नी

Answer 2

मेरे दृष्टिकोण से <hr> तत्वों का उपयोग करना अधिक अर्थपूर्ण है क्योंकि फ्लेक्स आइटम के बीच लाइन टूट जाती है ।

.container {
  display: flex;
  flex-flow: wrap;
}

.container hr {
  width: 100%;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <hr>
  <div>3</div>
  <div>2</div>
  ...
</div>

क्रोम 66, फ़ायरफ़ॉक्स 60 और सफारी 11 में परीक्षण किया गया।

Comments

यह है कि मैं यह कैसे करते हैं, महान काम करता है। जोड़ना {{फ्लेक्स-आधार: 100%; ऊंचाई: 0; मार्जिन: 0; सीमा: 0; } ब्रेक को सहज बनाता है।

— बेसवर्क्स

मुझे यह तरीका पसंद है। नोट: gap: 10px;पंक्तियों के बीच की दूरी का उपयोग करते समय वास्तव में 20px। पता करने के लिए, उस आकार के आधे हिस्से की पंक्ति अंतर निर्दिष्ट करें gap: 5px 10px;:।

— CuddleBunny

@ ब्रेसवर्क्स: bordernone0

— मार्क

@ चिह्न, border:0;बस के रूप में मान्य है border:none;। देखें: stackoverflow.com/questions/2922909/…

— आतिशबाजी

मुझे इस समाधान के सहानुभूति मूल्य के बारे में संदेह है, लेकिन यह काम करता है।

— क्वासी

Answer 3

@ ऑरिओल का एक उत्कृष्ट उत्तर है, दुख की बात है कि अक्टूबर 2017 तक, न तो display:contents, न page-break-afterही व्यापक रूप से समर्थित है, बेहतर कहा कि यह फ़ायरफ़ॉक्स के बारे में है जो इस का समर्थन करता है लेकिन अन्य खिलाड़ियों का नहीं, मैं निम्नलिखित "हैक" के साथ आया हूं जिसे मैं कठिन से बेहतर मानता हूं प्रत्येक 3 तत्व के बाद एक ब्रेक में कोडिंग, क्योंकि इससे पृष्ठ को मोबाइल के अनुकूल बनाने में बहुत मुश्किल होगी।

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

"हैक" प्रत्येक डिव के बाद बस एक अतिरिक्त तत्व जोड़ना है, जिसे निर्धारित करने के display:noneलिए सीएसएस nth-childका उपयोग किया जाता है और यह तय करने के लिए सीएसएस का उपयोग किया जाता है कि वास्तव में इस तरह से लाइन ब्रेक लगाने के लिए दृश्यमान बनाया जाना चाहिए:

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n-1) {
  background: silver;
}
.breaker {
  display: none;
}
.breaker:nth-child(3n) {
  display: block;
  width: 100%;
  height: 0;
}

<div class="container">
  <div class="item">1</div>
  <p class="breaker"></p>
  
  <div class="item">2</div>
  <p class="breaker"></p>
  
  <div class="item">3</div>
  <p class="breaker"></p>
  
  <div class="item">4</div>
  <p class="breaker"></p>
  
  <div class="item">5</div>
  <p class="breaker"></p>
  
  <div class="item">6</div>
  <p class="breaker"></p>
  
  <div class="item">7</div>
  <p class="breaker"></p>
  
  <div class="item">8</div>
  <p class="breaker"></p>
  
  <div class="item">9</div>
  <p class="breaker"></p>
  
  <div class="item">10</div>
  <p class="breaker"></p>
</div>

Comments

मैंने यह भी पाया कि "प्रदर्शन: सामग्री" और "पृष्ठ-विराम के बाद" तरीके काम नहीं कर रहे हैं, और इस "हैक" का सहारा लिया है। यह एक Chrome बग के रूप में सूचना मिली थी, और के रूप में "WontFix" (देखें चिह्नित bugs.chromium.org/p/chromium/issues/detail?id=473481 ) स्पष्टीकरण के साथ: "कोई सीएसएस कार्य समूह, के अनुसार, नहीं है सीएसएस के साथ एक फ्लेक्स बॉक्स में एक लाइन ब्रेक को मजबूर करने का वर्तमान तरीका। "

— मार्टिन_डब्ल्यू

आप चयनकर्ता का उपयोग करके अव्यवस्था का एक स्पर्श बचा सकता है .container>p। फिर उन सभी <p></p>टैग को classविशेषता की आवश्यकता नहीं होगी । निश्चित रूप से महत्वपूर्ण नहीं है । बस मेरे आलसी मस्तिष्क को अपने चतुर समाधान के लिए एक छोटे, अंतरिक्ष-बचत वाले ट्वीटर की तलाश है। बेशक, यह उपयोगकर्ता पर निर्भर करता है कि <p>उसके पास .containerdiv के सीधे बच्चों के रूप में कोई अन्य टैग नहीं हैं । तकनीकी रूप से आप अन्य सभी <div>बच्चों के साथ भी ऐसा ही कर सकते हैं , लेकिन आपके द्वारा किए <div>गए की .containerतुलना में आपके पास अन्य एस होने की बहुत अधिक संभावना है <p>, इसलिए शायद वहां कोई स्मार्ट कदम नहीं है।

— स्टीव

टमाटर, सोना, और चांदी के उपयोग के लिए तारीफ

— krmmens

Answer 4

आप एक अर्थपूर्ण लाइनब्रेक चाहते हैं?

फिर उपयोग करने पर विचार करें <br>। W3Schools आपको सुझाव दे सकते हैं कि BRसिर्फ कविताएं लिखने के लिए है (मेरा जल्द ही आ रहा है) लेकिन आप शैली को बदल सकते हैं इसलिए यह 100% चौड़ाई वाले ब्लॉक तत्व के रूप में व्यवहार करता है जो आपकी सामग्री को अगली पंक्ति में धकेल देगा। यदि 'br' एक विराम का सुझाव देता है तो यह मेरे लिए hr100% उपयोग करने की तुलना में अधिक उपयुक्त लगता है और divhtml को अधिक पठनीय बनाता है।

<br>जहां आपको लाइनब्रीक्स की जरूरत है वहां डालें और इसे इस तरह से स्टाइल करें।

 // Use `>` to avoid styling `<br>` inside your boxes 
 .container > br 
 {
    width: 100%;
    content: '';
 }

आप कर सकते हैं को निष्क्रिय <br>मीडिया क्वेरी के साथ की स्थापना करके, display:करने के लिए blockया noneके रूप में उपयुक्त (मैं इस का एक उदाहरण शामिल किया है लेकिन यह पता टिप्पणी की बाएं)।

order:जरूरत पड़ने पर आप ऑर्डर सेट करने के लिए भी इस्तेमाल कर सकते हैं ।

और आप विभिन्न वर्गों या नामों के साथ जितना चाहें उतना डाल सकते हैं :-)

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

.container > br
{
  width: 100%;
  content: '';
}

// .linebreak1 
// { 
//    display: none;
// }

// @media (min-width: 768px) 
// {
//    .linebreak1
//    {
//       display: block;
//    }
// }

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <br class="linebreak1"/>
  <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 class="item">10</div>
</div>

---

W3Schools क्या कहते हैं, इसके लिए खुद को सीमित करने की आवश्यकता नहीं है:

Comments

तकनीक का एक विस्तार <br class="2col">हर दूसरे आइटम के <br class="3col">बाद , हर तीसरे के बाद रखना है । फिर cols-2कंटेनर में एक वर्ग लागू करें और केवल उस कॉलम के लिए उपयुक्त लाइनब्रेक को सक्षम करने के लिए सीएसएस बनाएं। जैसे। br { display: none; } .cols-2 br.2col { display: block; }

— सिमोन_विवर

नहीं, एक brलाइन तोड़ने वाले तत्वों के लिए नहीं है , यह पाठ के लिए है : developer.mozilla.org/en-US/docs/Web/HTML/Element/br ... stackoverflow.com/questions/3937515/…

— Ason

मैं अपने शब्दों को बदल दूंगा ताकि इसे एक सही समाधान के रूप में पेश न कर सकूं लेकिन कुछ मामलों के लिए मैं इसे अन्य div या छद्म तत्व समाधानों से भी बदतर नहीं देखता। शायद मैं अब इसके बारे में एक कविता लिखूंगा।

— सिमोन_विवर

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

— असोन

याद रखें, आप W3Schools का प्रिंट पोस्ट करते हैं, W3C का नहीं, वे कनेक्टेड नहीं हैं।

— एडू रुइज़

Answer 5

मुझे लगता है कि पारंपरिक तरीका लचीला और समझने में काफी आसान है:

मार्कअप

<div class="flex-grid">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-3">.col-3</div>
    <div class="col-9">.col-9</div>

    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

ग्रिड बनाएँ : फ़ाइल:

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.col-1 {flex: 0 0 8.3333%}
.col-2 {flex: 0 0 16.6666%}
.col-3 {flex: 0 0 25%}
.col-4 {flex: 0 0 33.3333%}
.col-5 {flex: 0 0 41.6666%}
.col-6 {flex: 0 0 50%}
.col-7 {flex: 0 0 58.3333%}
.col-8 {flex: 0 0 66.6666%}
.col-9 {flex: 0 0 75%}
.col-10 {flex: 0 0 83.3333%}
.col-11 {flex: 0 0 91.6666%}
.col-12 {flex: 0 0 100%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

मैंने एक उदाहरण (jsfiddle) बनाया है

400px के तहत विंडो का आकार बदलने का प्रयास करें, यह उत्तरदायी है !!

Comments

इस समाधान में तत्व एक साथ हैं, विचार उनके बीच एक लंबा रिक्त स्थान है।

— जुआनमा मेंडेज़ जूल

Answer 6

एक और संभावित समाधान जो किसी अतिरिक्त मार्कअप को जोड़ने की आवश्यकता नहीं है, तत्वों को अलग करने के लिए कुछ गतिशील मार्जिन जोड़ना है।

उदाहरण के मामले में, इसे 3n + 2 तत्व (2, 5, 8) में calc()जोड़ने margin-leftऔर इसकी सहायता से किया जा सकता है।margin-right

.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

स्निपेट उदाहरण

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

<div class="container">
  <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 class="item">10</div>
</div>

Comments

यह एक वोट का हकदार है। फ्लेक्स और मार्जिन के संयोजन का उपयोग लाइन ब्रेक का समर्थन करने का एक बहुत सरल तरीका है। यह भी calcइस जवाब में उल्लिखित के साथ वास्तव में अच्छी तरह से काम करता है ।

— स्टिलज

मुझे यह बेहतर लगता है, बस margin-right: 1pxआइटम, और यह एक नई पंक्ति में अगले आइटम को शुरू करेगा।

— अरविले

Answer 7

मैं मिश्रण में इस उत्तर को फेंकना चाहता हूं, एक अनुस्मारक के रूप में इरादा है कि - सही शर्तें दी गई हैं - आपको कभी-कभी हाथ में समस्या को खत्म करने की आवश्यकता नहीं है। क्या आप चाहते हैं प्राप्त के साथ हो सकता है flex: wrapऔर max-widthबजाय :nth-child।

https://jsfiddle.net/age3qp4d/

Answer 8

भविष्य के प्रश्नों के लिए, floatसंपत्ति का उपयोग करके और प्रत्येक 3 तत्वों में इसे साफ़ करके भी करना संभव है ।

यहाँ एक उदाहरण मैंने बनाया है।

.grid {
  display: inline-block;
}

.cell {
  display: inline-block;
  position: relative;
  float: left;
  margin: 8px;
  width: 48px;
  height: 48px;
  background-color: #bdbdbd;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-indent: 4px;
  color: #fff;
}

.cell:nth-child(3n) + .cell {
  clear: both;
}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
</div>

Comments

यहाँ समस्या यह है कि ओपी ने कहा कि समाधान में फ्लेक्सबॉक्स का उपयोग करना है या display: flex;नहीं,display: inline-block;

— bafromca

आप .cell:nth-child(3n + 1)इसके बजाय लिख सकते हैं

— Si7ius

Answer 9

मैंने यहाँ कई उत्तर दिए, और उनमें से किसी ने भी काम नहीं किया। विडंबना यह है कि जो काम किया, वह सबसे सरल विकल्प के बारे में <br/>प्रयास कर सकता था:

<div style="flex-basis: 100%;"></div>

या आप भी कर सकते हैं:

<div style="width: 100%;"></div>

जहां भी आप एक नई लाइन चाहते हैं, उसे रखें यह आसन्न के साथ भी काम करने लगता है <span>, लेकिन मैं इसे आसन्न के साथ उपयोग कर रहा हूँ <div>।

Comments

100% -अवसरण divs स्वीकृत उत्तर में दिया गया पहला समाधान है।

— टायलरएच

सच है, की तरह। वे एक खराब कारण (बदसूरत, वास्तव में?) के लिए नीचे देख रहे हैं। इसके अलावा, मेरा उत्तर है flex-basis।

— एंड्रयू

Answer 10

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}

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

आप यहाँ जैसे किसी तत्व में आइटम लपेटने का प्रयास कर सकते हैं। इसके साथ आपको बहुत सी सीएसएस का पता नहीं है बस एक अच्छी संरचना होने से समस्या हल हो जाएगी।

Comments

आप कंटेनर को एक सामान्य बना सकते हैं display: blockऔर उन नए टीयर 2 डिव फ्लेक्सबॉक्स को बना सकते हैं। यह पंक्तियों के लिए काम करता है। कॉलम मोड का उपयोग करते समय डिव को स्पैन से बदलें।

— जिगगंजर