फ्लेक्स-बॉक्स: ग्रिड को अंतिम पंक्ति संरेखित करें

378

मेरे पास कंटेनर के साथ एक साधारण फ्लेक्स-बॉक्स लेआउट है:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

अब मैं चाहता हूं कि अंतिम पंक्ति की वस्तुओं को दूसरे के साथ संरेखित किया जाए। justify-content: space-between;उपयोग किया जाना चाहिए क्योंकि ग्रिड की चौड़ाई और ऊंचाई को समायोजित किया जा सकता है।

वर्तमान में यह दिखता है

नीचे दाईं ओर का आइटम मध्य में होना चाहिए

यहाँ, मैं नीचे के आइटम को "मध्य कॉलम" में रखना चाहता हूँ। उसे पूरा करने का सबसे सरल तरीका क्या है? यहाँ एक छोटी सी jsfiddle है जो इस व्यवहार को दिखाती है।

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}
<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>
स्निपेट का विस्तार करें

css  flexbox  grid-layout 
— थोरबेन क्रोइस
स्रोत
2
डुप्लिकेट: stackoverflow.com/questions/16377972/…
— cimmanon
यहां मेरे समाधान की जांच करें मुझे लगता है कि यह हैक के बिना अच्छा काम करता है, बस गणित: stackoverflow.com/questions/18744164/…
— सेबस्टियन लॉबर
5
वैकल्पिक रूप से, उपयोग नए css ग्रिड मॉड्यूल का उपयोग कर सकता है - जिसमें यह समस्या नहीं है
— Danield
— माइकल बेंजामिन
1
मैंने उन मामलों के लिए एक सामान्य जेएस समाधान जोड़ा जब बच्चे की चौड़ाई परिवर्तनीय होती है, साथ ही पंक्ति चर पर वस्तुओं की संख्या भी।
— ताओ

जवाबों:

416

एक जोड़े ::afterजो अंतरिक्ष autofills। अपने HTML को प्रदूषित करने की आवश्यकता नहीं है। यहाँ एक कोडपेन दिखाया गया है: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}
— डैन एंड्रियासन
स्रोत
17
क्या यह संभव होगा कि यह किसी भी तरह अंतरिक्ष के आसपास काम करे?
— टॉम
60
@DanAndreasson दो मुद्दे हैं, यह बाईं ओर से शुरू नहीं होता है (जैसे अंतरिक्ष-बीच), और अंतिम पंक्ति के आइटमों के बीच का स्थान पिछली पंक्ति की तुलना में भिन्न होता है ("किसी भी आकार में कुछ निश्चित चौड़ाई की वस्तुओं का अनुकरण") ग्रिड - दोनों से संबंधित है) ... codepen.io/anon/pen/gPoYZE जो मैं चाहता था कि "रणनीति" (स्पेस-अराउंड या स्पेस-बीच) बनाए रखना है, लेकिन पिछली लाइनों की तरह बाईं ओर से शुरू करें ... मैं जानना चाहता था, अगर आपके अद्भुत समाधान को सामान्य करना संभव है।
— टॉम
44
यह केवल इसलिए काम करता है क्योंकि वस्तुओं में उन्हें रखने के लिए पैडिंग होती है और संयुक्त प्रतिशत चौड़ाई प्रत्येक सेट के लिए 100% के बराबर होती है । इस कोडपेन में मुझे हटा दिया justify-content: space-between;गया .gridऔर हटा दिया गया .grid:afterऔर यह समान काम करता है। अब आप कुछ करने की कोशिश की है, तो इस तरह यह पूरी तरह से टूट जाता है। 4 सेट के प्रत्येक सेट की चौड़ाई को 100% तक न जोड़ें। में ओपी की बेला चौड़ाई पिक्सल में सेट कर रहे हैं तो अपने समाधान काम नहीं करता है इस स्थिति।
— जैकब अल्वारेज़
22
इस समाधान की कोशिश करते हुए, शुरू में, यह अंतिम पंक्ति में कम था आइटम के साथ ठीक से नहीं फैले थे space-between। हालांकि, जब मैं सेट flex-basisकी .grid:afterग्रिड में अन्य मदों (प्रति-ब्रेकप्वाइंट, ऊपर डिफ़ॉल्ट / आधार मॉड्यूल कोड अधिभावी), अंतिम पंक्ति सही ढंग से प्रसार के रूप में एक ही आकार के लिए। सफारी, आईओएस, फ़ायरफ़ॉक्स, क्रोम पर काम करने लगता है (आईई का परीक्षण करने की आवश्यकता है) और मेरे शुरुआती कार्यान्वयन पर मेरी सबसे बड़ी पंक्ति का आकार 3 है।
— वेबबॉवर
8
मेरी आवश्यकताओं के लिए यह निम्नलिखित संशोधन के साथ काम करता है: { content: "";flex: 0 0 32%;max-width: 480px;}और मैंने मीडिया क्वेरी में बदलाव के साथ अधिकतम-चौड़ाई को बदल दिया ताकि ग्रिड सभी चौड़ाई में परिपूर्ण हो।
— कॉलिन विजमैन
160

एक तकनीक कई अतिरिक्त तत्वों को सम्मिलित करेगी (जितने तत्वों की अधिकतम संख्या आपको कभी भी एक पंक्ति में होने की उम्मीद है) जिन्हें शून्य ऊंचाई दी गई है। अंतरिक्ष अभी भी विभाजित है, लेकिन कुछ नहीं करने के लिए बहुत कम पंक्तियों को ढहते हैं:

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}
<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
स्निपेट का विस्तार करें

भविष्य में, यह कई का उपयोग करके प्राप्त हो सकता है ::after(n)।

— dalgard
स्रोत
11
दुर्भाग्य से यह मार्कअप को गैर-अर्थ तरीके से दूषित करता है, लेकिन यह पूरी तरह से काम करता है। : एसआई काश मैं इस व्यवहार, फ्लेक्सबॉक्स या अन्यथा को दोहराने के लिए किसी अन्य तरीके से जानता था, जिसे गैर-अर्थ तत्वों की आवश्यकता नहीं थी।
— रयान नॉरबॉयर
33
सहमत, यह गंदा है, लेकिन यह काम करता है, और बहुत सारे हैक्स की तुलना में कम हैसी है। इसे फेक, मैं इसका उपयोग कर रहा हूं, जब तक :: बाद (12) लाभ का समर्थन करता है, या वे कुछ अतिरिक्त औचित्य विकल्प जोड़ते हैं। यह एक वास्तविक शर्म की बात है कि जिस तरह से फ्लेक्सबॉक्स इस समय काम करता है, वह सीधे सादे गलत है! यदि आप पाठ के एक पैराग्राफ को सही ठहरा रहे थे तो आप कभी भी अंतिम पंक्ति को सही ठहराने की कोशिश नहीं करेंगे। निश्चित रूप से एक विकल्प होना चाहिए था, मुझे विश्वास नहीं हो रहा है कि वे इससे चूक गए हैं।
— Codemonkey
4
मैं एक सीएसएस केवल समाधान के साथ आया था .. यह होने वाली चेतावनी केवल दो लापता वस्तुओं के लिए ही हो सकती है, इसलिए केवल फ्लेक्स ग्रिड में अधिकतम तीन आइटम प्रति रैपिंग पंक्ति के साथ सुरक्षित रूप से काम करेगा। डेमो: codepen.io/lukejacksonn/pen/dozqVq यहाँ सिद्धांत अतिरिक्त बच्चों के रूप में छद्म तत्वों का उपयोग करना और उन्हें कंटेनर में आइटम के रूप में एक ही फ्लेक्स संपत्ति देना है।
— ल्यूकजैकसन
7
@Codemonkey यीशु। मैंने केवल फ्लेक्सबॉक्स सोच का उपयोग करना शुरू कर दिया है कि कैसे मैं इन सभी हैक से छुटकारा पाऊंगा जिसका उद्देश्य उन इनलाइन-ब्लॉकों को एक ग्रिड के अंदर संरेखित करना है, और अब यह पता चला है कि यह बस संभव नहीं है! मैंने उस ब्लॉक को एकदम से हिट किया है, जो मैंने सोचा था कि उन सीमाओं तक पहुंचकर मैं शायद ही कभी इन सभी पुरानी असंगत सीएसएस समस्याओं को हल करने में खुशी से पहुंचूंगा। इतनी जल्दी नहीं, मुझे लगता है। उचित ऊर्ध्वाधर केंद्र प्राप्त करने में केवल 20 साल लगे - हम निश्चित रूप से इंतजार कर सकते हैं। यीशु, यह इतना आसान काम लगता है ...
— एंड्री
3
@ बालगार्ड मुझे ऐसा नहीं लगता। देखें मेरी टिप्पणी ।
— जैकब अल्वारेज़
108

जैसा कि अन्य पोस्टरों ने उल्लेख किया है - फ्लेक्सबॉक्स के साथ अंतिम पंक्ति को बाईं ओर संरेखित करने का कोई साफ तरीका नहीं है (कम से कम वर्तमान युक्ति के अनुसार)

हालांकि, इसके लायक क्या है: सीएसएस ग्रिड लेआउट मॉड्यूल के साथ यह उत्पादन करने के लिए आश्चर्यजनक रूप से आसान है:

मूल रूप से संबंधित कोड इसके लिए उबलता है:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) कंटेनर तत्व को ग्रिड कंटेनर बनाएं

2) ग्रिड को 100px चौड़ाई वाले ऑटो कॉलम के साथ सेट करें। (के उपयोग के नोट स्वत: भरण (के रूप में करने के लिए apposed auto-fitजो (एक 1-पंक्ति लेआउट के लिए) 0 को खाली पटरियों गिर - -। शेष स्थान ले करने के लिए विस्तार करने के लिए आइटम के कारण यह एक उचित 'के बीच अंतरिक्ष में परिणाम होगा 'लेआउट जब ग्रिड में केवल एक पंक्ति होती है जो हमारे मामले में वह नहीं है जो हम चाहते हैं। ( इस डेमो को उनके बीच अंतर देखने के लिए देखें)।

3) ग्रिड पंक्तियों और स्तंभों के लिए अंतराल / गटर सेट करें - यहाँ, क्योंकि 'स्पेस-बीच' लेआउट चाहते हैं - यह अंतराल वास्तव में एक न्यूनतम अंतर होगा क्योंकि यह आवश्यक रूप से बढ़ेगा।

4) फ्लेक्सबॉक्स के समान।

कोड स्निपेट दिखाएं

कोडपेन डेमो (प्रभाव को देखने के लिए आकार बदलें)

— Danield
स्रोत
4
अच्छा समाधान। केवल समस्या यह है कि यह IE10 / 11 के साथ काम नहीं करता है।
— zendu
1
इस संबंध में auto-fit, क्रोम 57-60 में एक बग था (और सैमसंग इंटरनेट 6.0 की तरह इसके इंजन पर आधारित ब्राउज़र), क्योंकि उस समय कल्पना थोड़ी अस्पष्ट थी। अब कल्पना को स्पष्ट किया गया है और क्रोम के नए संस्करण auto-fitसही ढंग से प्रस्तुत करते हैं , लेकिन पुराने इंजन वाले ब्राउज़र अभी भी उपयोग में हैं, इसलिए कृपया इस मूल्य के साथ सावधान रहें।
— इल्या स्ट्रेलित्सिन
4
वर्तमान संभावनाओं के प्रकाश में, यह अब स्वीकृत उत्तर होना चाहिए। :afterछद्म तत्व का उपयोग करने से किनारे के मामलों में अवांछित परिणाम हो सकते हैं।
— पॉल
2
@ Danield इस सुझाव ने मुझे बहुत मदद की, धन्यवाद!
— क्राइस
4
यह स्वीकृत उत्तर होना चाहिए। मैं इसे फ्लैक्सबॉक्स के साथ प्रगतिशील वृद्धि की भावना से जोड़ूंगा: ग्रिड का समर्थन नहीं करने वाले ब्राउज़र फ्लेक्सबॉक्स संस्करण प्रदर्शित करेंगे, जो मेरे लिए पर्याप्त रूप से पर्याप्त है।
— पलंतीर
27

बिना किसी अतिरिक्त मार्कअप के, बस ::afterमेरे लिए कॉलम की चौड़ाई निर्दिष्ट करने का काम किया।

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

इस तरह से HTML के साथ: 

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>
— निकोलस एरेवलो
स्रोत
8
यह दिलचस्प है, लेकिन काफी सही नहीं है। समस्या तब आती है जब आप नीचे की पंक्ति में दो से अधिक तत्वों के साथ काम कर रहे होते हैं - ऊपर की पंक्तियों के बीच तत्वों के बीच उभरने वाली रिक्ति कभी अंतिम पर नहीं उभरती है; अंतरिक्ष के बीच की मूल उपयोगिता को नकारते हुए आइटम एक साथ हार्ड-पैक किए जाते हैं।
— जॉन Haugeland
यदि आप flex-basis: 10emचौड़ाई के बजाय उपयोग करते हैं तो और भी बेहतर ।
— beytarovski
14

आप नहीं कर सकते। फ्लेक्सबॉक्स एक ग्रिड प्रणाली नहीं है। इसके पास वह भाषा निर्माण नहीं है जो आप करने के लिए कह रहे हैं, कम से कम यदि आप उपयोग कर रहे हैं तो नहीं justify-content: space-between। फ्लेक्सबॉक्स के साथ आप निकटतम प्राप्त कर सकते हैं स्तंभ अभिविन्यास का उपयोग करना, जिसके लिए एक स्पष्ट ऊंचाई निर्धारित करने की आवश्यकता होती है:

http://cssdeck.com/labs/pvsn6t4z (नोट: उपसर्ग शामिल नहीं हैं)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

हालाँकि, यह केवल कॉलम का उपयोग करने के लिए सरल होगा, जिसमें बेहतर समर्थन है और एक विशिष्ट ऊंचाई निर्धारित करने की आवश्यकता नहीं है:

http://cssdeck.com/labs/dwq3x6vr (नोट: उपसर्ग शामिल नहीं हैं)

ul {
  columns: 15em;
}
— cimmanon
स्रोत
2
एक रास्ता है; मेरा जवाब देखिए।
— डैलगार्ड
@ सादर, आपका जवाब एक समाधान है, एक सच्चा समाधान नहीं। cimmanon का उत्तर सही है।
— योना
1
@ जोनाह मुझे लगता है कि "तकनीक" मेरे उत्तर का एक उचित विवरण है। यह निश्चित रूप से बहुत से लोगों के लिए समाधान के रूप में काम करता है, जिसमें पूछने वाला भी शामिल है।
— डलगार्ड
2
@dalgard यह इस तथ्य को नहीं बदलता है कि फ्लेक्सबॉक्स भाषा निर्माणों को वह नहीं प्रदान करता है जो पूछा जा रहा है। इसके अलावा, मैं तर्क दूंगा कि नकली तत्वों को जोड़ना एक अत्यंत गंदा अभ्यास है, वहीं लेआउट के लिए तालिकाओं का उपयोग करने के साथ।
— साइमन
4
यह सुंदर नहीं है, लेकिन फ्रंट एंड डेवलपमेंट संभव की कला है; व्यावहारिकता एक मूल आधार है। मुझे लगता है कि यह शब्द बहुत गलत है, क्योंकि वास्तविक दुनिया वेब साइटों (cf. बूटस्ट्रैप कंटेनर तत्वों) के 99.9% पर स्टाइल के लिए अतिरिक्त तत्वों का उपयोग किया जा रहा है।
— दालगार्ड
12

एक संभावित समाधान कंटेनर justify-content: flex-start;पर उपयोग करना है .grid, अपने बच्चों पर आकार प्रतिबंध और उचित बाल तत्वों पर मार्जिन - कॉलम की वांछित संख्या के आधार पर।

3-स्तंभ ग्रिड के लिए, मूल CSS इस तरह दिखेगा:

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

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

यह एक और अपूर्ण समाधान है, लेकिन यह काम करता है।

http://codepen.io/tuxsudo/pen/VYERQJ

— जारेड
स्रोत
11

मुझे पता है कि यहाँ कई उत्तर हैं लेकिन .. ऐसा करने का सबसे सरल तरीका gridइसके बजाय flexऔर grid template columnsसाथ है repeatऔर auto fills, जहाँ आपको 100pxअपने स्निपेट कोड से प्रत्येक तत्व को दिए गए पिक्सेल की संख्या निर्धारित करनी है ।

.exposegrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
     justify-content: space-between;
}
 .exposetab {
     width: 100px;
     height: 66px;
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.4);
     border-radius: 5px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     margin-bottom: 10px;
}
<div class="exposegrid">
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
</div>
स्निपेट का विस्तार करें

— चांदी सरफर
स्रोत
2
यह अंतिम पंक्ति वस्तुओं को संरेखित करने के लिए उचित समाधान है।
— a.bbieri
मैं सहमत हूं, ग्रिड का उपयोग करने का उचित तरीका है। यह ग्रिड का उपयोग करने के लिए फ्लेक्सबॉक्स लेकिन बहुत क्लीनर के साथ प्राप्त किया जा सकता है।
— नवबंर
6

हाँ।! हम कुछ मीडिया प्रश्नों के साथ और अधिकतम कॉलमों को पूर्वनिर्धारित नहीं कर सकते हैं ।

यहां 4 कॉलम का उपयोग किया जा रहा है। मेरा कोड जांचें:

.container {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
}

.container .item {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}
<div class="container">

  <div class="item">
    <div class="item-child">1</div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>

</div>
स्निपेट का विस्तार करें

नोट
1) चाइल्ड डिव बनाने की आवश्यकता नहीं है। यह किसी भी अन्य टैग की तरह हो सकता है जैसे 'img' r जो आप चाहते हैं ..
2) यदि आप अधिक कॉलम चाहते हैं तो मीडिया क्वेरीज़ और अधिकतम no .of कॉलम समायोजित करें।

— मोहम्मद मोहिदीन ए.एच.
स्रोत
यह नवीनतम IE में केवल 3 बनाता है
— Akxe
6

यदि आप किसी प्रारंभिक स्थान के बिना शुरू होने वाली वस्तुओं और वस्तुओं के बीच कुछ जगह के साथ ग्रिड चाहते हैं तो यह सरल समाधान काम करता है:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

यदि आप प्रारंभिक 5 पीएक्स स्पेस चाहते हैं तो केवल नकारात्मक मार्जिन हटा दें :) सरल।

https://jsfiddle.net/b97ewrno/2/

स्वीकृत उत्तर, जबकि अच्छा है, यह दूसरी पंक्ति पर तत्वों के बीच कोई स्थान नहीं होने का कारण बनता है।

— Ozzie
स्रोत
1
हैरानी की बात यह है कि कोई और वोट नहीं है। यह एक सुंदर दृष्टिकोण है जो फ्लेक्स संग्रहालय में है।
— एडुआर्डो ला होज मिरांडा
1
@EduardoLaHozMiranda धन्यवाद! लेकिन "संग्रहालय" क्यों? IE11 सीएसएस ग्रिड का समर्थन नहीं करता है और अधिकांश साइटों को अभी भी समर्थन करने की आवश्यकता है। + फ्रंटएंड विकास में कुछ बड़े टाइमर अभी भी दावा करते हैं कि ग्रिड बनाम फ्लेक्सबॉक्स के लिए अलग-अलग उपयोग के मामले हैं। लेकिन शायद आपका सिर्फ यही मतलब था कि यह वेब इतिहास का एक महत्वपूर्ण हिस्सा होना चाहिए: D
— OZZIE
1
हा हा हां। मैं उस समय उत्साहित था। बस इसका मतलब था कि यह इस समस्या पर एक महान और न्यूनतम कदम था।
— एडुआर्डो ला होज़ मिरांडा
@dencey आपको यह जानने की आवश्यकता नहीं है कि इस समाधान के लिए, यह प्रति पंक्ति 25% इतना अधिकतम 4 है, लेकिन आप जो भी प्रतिशत चाहें
— उसका
@OZZIE मेरा मतलब है कि आइटम की चौड़ाई (जैसे 100px) तय की गई है, लेकिन कंटेनर की चौड़ाई गतिशील है, इसलिए प्रति पंक्ति आइटम गतिशील है।
— २
4

यदि आप अंतिम आइटम को ग्रिड में संरेखित करना चाहते हैं तो निम्न कोड का उपयोग करें:

ग्रिड कंटेनर

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

ग्रिड में आइटम

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

चाल .कार्ड-ग्रिड की अधिकतम-चौड़ाई के बराबर आइटम की अधिकतम-चौड़ाई सेट करने के लिए है: के बाद।

कोडपेन पर लाइव डेमो

— फ्रैंक स्पिन
स्रोत
cthulu आपको और आपके कंप्यूटर को आशीर्वाद देता है
— L422Y
3
कार्ड का आकार तय होने पर यह दृष्टिकोण काम नहीं करता है और प्रत्येक पंक्ति में कार्ड की संख्या अज्ञात है। codepen.io/zendu/pen/WXNGvo
— zendu
3

"फ्लेक्स-स्टार्ट" का उपयोग करना और हाशिये को मैन्युअल रूप से जोड़ना संभव है। इसके लिए कुछ गणित-हैकिंग की आवश्यकता होती है लेकिन निश्चित रूप से इसे करना आसान है और इसे LESS जैसे CSS प्रीप्रोसेसर के साथ उपयोग करना आसान है।

उदाहरण के लिए यह कम मिश्रण देखें:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

और फिर इसे आसानी से एक उत्तरदायी ग्रिड लेआउट प्रदर्शित करने के लिए इस्तेमाल किया जा सकता है:

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

यहाँ का एक उदाहरण है

http://codepen.io/anon/pen/YyLqVB?editors=110

— सेबस्टियन लॉर्बर
स्रोत
आप @contentPercent का उपयोग कभी न करें। क्या आपका इरादा था?
— neverfox
चौड़ाई: @ सामग्रीपैरेंट / @ कॉलमनंबर;
— रियल्टो
वाह ! मैं वास्तव में इस समाधान से प्रभावित हूँ। मैं अपनी स्थिति के लिए अनुकूल करने की कोशिश करूँगा
— realtebo
3

यह समस्या मेरे लिए CSS ग्रिड का उपयोग करके हल की गई थी,

यह समाधान तभी लागू होता है जब आप कॉलम की संख्या ठीक कर रहे होते हैं अर्थात नहीं। तत्वों की एक पंक्ति में प्रदर्शित करने के लिए

-> ग्रिड का उपयोग करना लेकिन पंक्तियों की संख्या निर्दिष्ट नहीं करना, क्योंकि तत्वों की संख्या में वृद्धि होने से यह कॉलम में जुड़ जाता है और गतिशील रूप से पंक्तियों को जोड़ देता है, मैंने इस उदाहरण में तीन कॉलम निर्दिष्ट किए हैं

-> आपको अपने बच्चे / कोशिकाओं को कोई स्थान नहीं देना है, क्योंकि यह इसे ठीक कर देगा, जो हम नहीं चाहते हैं।

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}
स्निपेट का विस्तार करें

— अश्विन
स्रोत
1

यह संस्करण निश्चित चौड़ाई वाले ब्लॉकों के लिए सबसे अच्छा तरीका है:

http://codepen.io/7iomka/pen/oxxeNE

अन्य मामलों में - डलागार्ड का संस्करण

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
justify-content:center;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width:200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}
<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
स्निपेट का विस्तार करें

— Znacovean Simion
स्रोत
0

फ्लेक्सबॉक्स के बिना एक रास्ता है, हालांकि आपको निम्नलिखित शर्तों को पूरा करना होगा। 1) कंटेनर में पैडिंग है। 2) आइटम एक ही आकार के हैं और आपको पता है कि आप प्रति पंक्ति कितने चाहते हैं।

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

कंटेनर के दाईं ओर छोटा पैडिंग प्रत्येक सूची आइटम के दाईं ओर अतिरिक्त पैडिंग के लिए अनुमति देता है। समान ऑब्जेक्ट में अन्य आइटम्स मानकर जैसे कि सूची ऑब्जेक्ट 0 5% के साथ गद्देदार है, यह उनके साथ फ्लश हो जाएगा। हालाँकि, आप px मानों की गणना या उपयोग करने के लिए प्रतिशत को समायोजित कर सकते हैं।

बेशक, आप अपने तीसरे बॉक्स पर मार्जिन को हटाने के लिए nth-child (IE 9+) का उपयोग करके कंटेनर पर पैडिंग के बिना भी कर सकते हैं।

— ansorensen
स्रोत
0

Flexbox और कुछ मीडिया के प्रश्नों का उपयोग करना, मैं इस छोटे से काम के आसपास बनाया: http://codepen.io/una/pen/yNEGjv (अपने एक hacky सा लेकिन काम करता है):

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}
— ऊना क्रावट्स
स्रोत
0

मैंने इसके लिए एक SCSS मिक्सिन बनाया।

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

यह कोडपेन लिंक है: http://codepen.io/diana_aceves/pen/KVGNZg

आपको बस आइटम की चौड़ाई प्रतिशत और कॉलम की संख्या निर्धारित करनी होगी।

मैं आशा करता हूं यह आपकी मदद कर सकते हैं।

— डायना
स्रोत
0

यहाँ scss मिक्सिन का एक और जोड़ा है।

इन मिश्रणों का मानना ​​है कि आप आइसोटोप जैसे जेएस प्लगइन्स का उपयोग नहीं करने जा रहे हैं (वे HTML मार्कअप ऑर्डर का सम्मान नहीं करते हैं, इस प्रकार सीएसएस एनटी नियमों के साथ खिलवाड़ करते हैं)।

इसके अलावा, आप उनका पूरा फायदा उठा पाएंगे, खासतौर पर तब जब आप अपने रिस्पांसिबल ब्रेकप्वाइंट को मोबाइल में पहले से लिख रहे हों। आप छोटे ब्रेकपॉइंट पर फ्लेक्सबॉक्स_ग्रिड () और निम्न ब्रेकप्वाइंट पर फ्लेक्सबॉक्स_सेल () का उपयोग करेंगे। flexbox_cell () पहले से तय किए गए मार्जिन को रीसेट करने का ध्यान रखेगा जो अब बड़े ब्रेकपॉइंट पर उपयोग नहीं किया जाता है।

और वैसे भी, जब तक आप अपने कंटेनर के फ्लेक्स गुणों को सही ढंग से सेट करते हैं, तब तक आप आइटम पर केवल flexbox_cell () का उपयोग कर सकते हैं, यदि आपको आवश्यकता हो।

यहाँ कोड है:

// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $gutter_width);
  }
}

// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $gutter_offset: $gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $gutter_width;
      }
    }
  }
}

उपयोग:

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

जाहिर है, यह अंततः कंटेनर के पैडिंग / मार्जिन / चौड़ाई और सेल के निचले मार्जिन और पसंद को सेट करना है।

आशा है ये मदद करेगा!

— लुका रीगलिन
स्रोत
0

यह बहुत हैकरी है, लेकिन यह मेरे लिए काम करता है। मैं लगातार रिक्ति / मार्जिन हासिल करने की कोशिश कर रहा था।

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

— RustyDev
स्रोत
0

ऐसा लगता है कि किसी ने अंतिम आइटम पर फ्लेक्स-ग्रो समाधान का प्रस्ताव नहीं किया है। विचार यह है कि आपके पिछले फ्लेक्स आइटम को फ्लेक्स-ग्रो का उपयोग करके सभी जगह ले जाना है: 1।

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid > *:last-child {
  flex-grow: 1;
}

नोट: यह समाधान सही नहीं है, खासकर यदि आपने अपने फ्लेक्स आइटम के अंदर तत्वों को केंद्रित किया है क्योंकि यह संभवतः अंतिम अंतिम फ्लेक्स आइटम पर केंद्रित होगा।

— Dionys
स्रोत
0

यह बहुत सारे उत्तरों का संयोजन है, लेकिन यह वही करता है जो मुझे चाहिए था - जो कि अंतरिक्ष के बीच के व्यवहार को बनाए रखते हुए एक फ्लेक्स कंटेनर में अंतिम बच्चे को बाईं ओर संरेखित करना है (इस मामले में यह एक तीन-स्तंभ है लेआउट)।

यहाँ मार्कअप है:

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

.flex-container:after {
  content: "";
  flex-basis: 30%;
}
— मार्गरेट
स्रोत
1
अधिक सामान्य होने के लिए: फ्लेक्स-आधार का आकार चिल्ड के आकार के बराबर होना चाहिए।
— क्रिश्चियन टोफलो
1
मैंने किसी भी कॉलम के लिए काम के flex-grow: 0.9बजाय पाया है flex-basis। आधुनिक ब्राउज़रों के एक समूह में परीक्षण किया गया - यह उन सभी में काम करता है लेकिन पैडिंग IE में टूट गया है (लेकिन एज0 में काम कर रहा है
— Patabugen
0

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

  • आप रैपिंग के साथ 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 3em;
  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>
स्निपेट का विस्तार करें

— सलमान ए
स्रोत
0

यदि आप पंक्ति में तत्वों और एक पंक्ति में तत्वों की मात्रा के बीच रिक्त स्थान की चौड़ाई जानते हैं, तो यह काम करेगा:

उदाहरण: पंक्ति में 3 तत्व, तत्वों के बीच 10px अंतर

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}
— norweny
स्रोत
0

बस एक खाली div जोड़ने के लिए Jquery / जावास्क्रिप्ट चाल का उपयोग करें:

if($('.exposegrid').length%3==2){
 $(".exposegrid").append('<div class="exposetab"></div>');
}
— वहीद मजहर
स्रोत
-1

अरे लड़का, मुझे लगता है कि मुझे न्यूनतम सीएसएस और जेएस के साथ एक अच्छा समाधान मिला। इसकी जांच - पड़ताल करें:

img {width:100%;}
li {
  display: inline-block;
  width:8em;
  list-style:none;
}
ul {text-align: justify;}
<ul>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
स्निपेट का विस्तार करें

यहां कुंजी यह याद रखना है कि हम जो हासिल करने की कोशिश कर रहे हैं वह वास्तव में क्या है text-align: justify करता है!

HTML में खाली तत्व उपस्थिति को बदले बिना अंतिम पंक्ति को पूरी तरह से प्रदर्शित करने के लिए हैं, लेकिन जो आप प्राप्त करने की कोशिश कर रहे हैं, उसे दिए जाने की आवश्यकता नहीं हो सकती है। हर स्थिति में सही संतुलन के लिए, आपको कम से कम x-4 खाली तत्वों की आवश्यकता है, x प्रदर्शित करने के लिए तत्वों की संख्या, या n-2, n उस स्तंभ की संख्या होने के नाते जिसे आप प्रदर्शित करना चाहते हैं।

— Sharcoux
स्रोत
-1

अंत में 0px पर सेट ऊँचाई को छोड़कर केवल कुछ नकली वस्तुओं को समान गुणों के साथ जोड़ें।

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

आप संरेखित करना चाहते हैं

के align-content: flex-start;बजाय का उपयोग करेंjustify-content: space-between;

यह आइटम को अंतिम पंक्ति को बाईं ओर खींचता है, और समान रूप से स्थान भी वितरित करता है,

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  /*justify-content: space-between; remove this line!!!! */ 
}

https://codepen.io/anon/pen/aQggBW?editors=1100

danAnderson समाधान डायनामिक नहीं है ।PER !!OD !!

जब आइटम की चौड़ाई 25 से 28 डैन से बदल गई और एंडरसन छवियों के बीच की जगह को विफल कर देता है

danAnderson: https://codepen.io/anon/pen/ZwYPmB?editors=1100

गतिशील: https://codepen.io/anon/pen/aQggBW?editors=1100

ive जो कहना चाहता था। डैन्स हैक है .....

— bh_earth0
स्रोत
-7

मैं इसे justify-content: space-betweenकंटेनर पर करने में सक्षम था

— chovy
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.