260

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

यहाँ एक प्रासंगिक स्निप है:

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

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

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

स्निपेट का विस्तार करें

html css flexbox

— विवेक महाराज
स्रोत

16

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

— विवेक महाराज

380

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

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

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

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

इसका समाधान वस्तुओं पर एक चौड़ाई को परिभाषित करना है। इसे इस्तेमाल करे:

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

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

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

स्निपेट का विस्तार करें

शॉर्टहैंड flex-grow: 1में परिभाषित होने के साथ flex, flex-basis25% होने की कोई आवश्यकता नहीं है , जिसके परिणामस्वरूप वास्तव में मार्जिन के कारण प्रति पंक्ति तीन आइटम होंगे।

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

— माइकल बेंजामिन
स्रोत

1

मुझे यह पसंद है क्योंकि यह मेरे लिए काम करता है, लेकिन "बहुत सारी जगह" मुझे थोड़ा असहज महसूस कराती है। वहाँ कुछ छोटी खिड़की या स्थिति है जहाँ यह "अनुमान" मुझे विफल हो सकता है?

— जैक्सन

1

कैसी स्थिति? अधिकांश लेआउट में चरम मामले होते हैं जो समस्याएं पैदा कर सकते हैं। ऐसे मामले आमतौर पर लागत-लाभ विश्लेषण के माध्यम से पालते हैं क्योंकि वे कभी नहीं, या लगभग कभी नहीं होते हैं। उदाहरण के लिए, उपरोक्त समाधान में, यदि आप बहुत बड़े मार्जिन में रखते हैं, तो लेआउट टूट सकता है। यदि यह एक मुद्दा है, तो इसे प्रश्न में पोस्ट किया जाना चाहिए। @ जैक्सन

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

2

"यदि आप बहुत बड़े मार्जिन में रखते हैं, तो लेआउट टूट सकता है" यह एक ऐसे उदाहरण का उदाहरण है जिससे मैं बचना चाहूंगा। मैं व्यावहारिकता की परवाह नहीं करता; पूर्णता के लिए मेरे आराध्य का मनोरंजन करें। क्या अधिक सटीक होने का कोई तरीका है?

— जैक्सन

27

आप इसका उपयोग भी कर सकते हैंflex: 1 0 calc(25% - 10px);

— मार्क

2

बहुत बढ़िया जवाब! एक छोटा सुधार जो मैं उपयोग करता हूं, वह margin: 2%;एक निश्चित पिक्सेल संख्या के बजाय है ताकि छोटे उपकरणों / प्रस्तावों पर एक नई पंक्ति में बक्से को कूदने से रोका जा सके। (100 - (4 * box-width-percent)) / 8अलग-अलग बॉक्स चौड़ाई के लिए सामान्य सूत्र % है

— थोमसैप्सक

104

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

डेमो

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

— dowomenfart
स्रोत

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

— विवेक महाराज

1

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

— विवेक महाराज

3

हाँ, कैल्क इसे हल करता है! 'कैल्क (100% * (1/4) - 10px - 1px)'। देखें jsfiddle.net/vivmaha/oq6prk1p/9

— विवेक Maharajh

24

फिर इसमें फ्लेक्स का क्या उपयोग, फिर भी?

— बारजड़

उत्तरदायी डिजाइन के बारे में क्या? हम बच्चे पर एक निश्चित चौड़ाई नहीं डालना चाहते हैं

— कैंडलजैक

40

यहाँ एक और apporach है।

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

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

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

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

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

— Capy
स्रोत

1

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

— कैंडजैक

मुदासिर अब्बास का अन्य उत्तर केवल फ्लेक्स सेटिंग्स का उपयोग करता है, इसलिए मुझे लगता है कि यह एक क्लीनर समाधान है।

— एंड्रयू कोस्टर

17

मैं इसे नकारात्मक मार्जिन और गटर के लिए कैल्क का उपयोग करके इस तरह से करूंगा:

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

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

डेमो: https://jsfiddle.net/9j2rvom4/

वैकल्पिक सीएसएस ग्रिड विधि:

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

डेमो: https://jsfiddle.net/jc2utfs3/

— shanomurphy
स्रोत

14

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

आशा करता हूँ की ये काम करेगा। अधिक विवरण के लिए आप इस लिंक का अनुसरण कर सकते हैं

— मुदासिर अब्बास
स्रोत

4

मेरा मानना है कि यह उदाहरण अधिक नंगे पैर है और फिर समझना आसान है ।

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

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

— जोसेफ चो
स्रोत

3

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

— डैनी वैन होलेनटेन

2

.parent-wrapper {
	height: 100%;
	width: 100%;
	border: 1px solid black;
}
	.parent {
	display: flex;
	font-size: 0;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-bottom: -10px;
}
	.child {
	background: blue;
	height: 100px;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: calc(25% - 10px);
}
	.child:nth-child(even) {
	margin: 0 10px 10px 10px;
	background-color: lime;
}
	.child:nth-child(odd) {
	background-color: orange; 
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

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

स्निपेट का विस्तार करें

;)

— माटुस मानसो बार्स्ज़क
स्रोत

1

यदि आप कृपया इस बारे में कुछ संदर्भ जोड़ सकते हैं कि यह केवल पोस्टिंग कोड के बजाय ओपी प्रश्न का उत्तर क्यों देता है।

— d219

यदि आप justify-content: space-evenly;राजकुमार को जोड़ते हैं, तो वे अच्छी तरह से संरेखित करते हैं और आपको calcबच्चे पर नहीं करना है । उदाहरण के लिए धन्यवाद, हालांकि!

— मैटिज

0

फ्लेक्स रैप + निगेटिव मार्जिन

फ्लेक्स बनाम क्यों display: inline-block?

फ्लेक्स अधिक आकार के तत्वों के साथ लचीलापन देता है
अंतर्निहित सफेद रिक्ति ढहना (देखें 3 इनलाइन-ब्लॉक divs जिसमें 33% चौड़ाई माता-पिता में फिटिंग नहीं है )

नकारात्मक मार्जिन क्यों?

या तो आप बढ़त के मामलों के लिए SCSS या CSS-in-JS का उपयोग करते हैं (यानी कॉलम में पहला तत्व), या आप एक डिफ़ॉल्ट मार्जिन सेट करते हैं और बाद में बाहरी मार्जिन से छुटकारा पा लेते हैं।

कार्यान्वयन

https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
    <div class="container">
        <div class="elementContainer">
            <div class="element">
            </div>
        </div>
        ...
    </div>
</div>

:root {
  --columns: 2;
  --betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}

.outerContainer {
    overflow: hidden; /* Hide the negative margin */
}

.container {
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--betweenColumns));
}

.elementContainer {
    display: flex; /* To prevent margin collapsing */
    width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
    margin: var(--betweenColumns);
}

.element {
    display: flex;
    border: 1px solid red;
    background-color: yellow;
    width: 100%;
    height: 42px;
}

— zurfyx
स्रोत

-12

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

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

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

// and so on!

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

— wle8300
स्रोत

6

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

— निक एफ

Flexbox: प्रति पंक्ति 4 आइटम

वैकल्पिक सीएसएस ग्रिड विधि:

फ्लेक्स रैप + निगेटिव मार्जिन

कार्यान्वयन