फ्लेक्सबॉक्स वाले ग्रिड के बारे में मेरे पास एक आसान सवाल है, लेकिन मैं इसे हल नहीं कर सकता

मेरे पास यह कोड है:

<div class="grid-items row">
<div class="item item-50 col-xs-6">
    <div class="text">
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
</div>

<div class="item col-xs-3">
    <h2>Lorem Ipsum is simply dummy text</h2>
</div>
<div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
</div>

तीन कॉलम, प्रत्येक कॉलम में 30px का कॉलम गैप होता है, पहले कॉलम की चौड़ाई 50% और दूसरे और तीसरे कॉलम की चौड़ाई 25% होती है। जाहिर है, मार्जिन तीसरे कॉलम में अतिप्रवाह का कारण बनता है। क्या चौड़ाई को बदले बिना इसे ठीक करना संभव है? यह आवश्यक है क्योंकि स्तंभों की पृष्ठभूमि होती है।

इस अभ्यास में मैं HTML को संशोधित नहीं कर सकता, केवल कक्षाएं जोड़ने के लिए...

स्तंभ वर्गों के गुण इस प्रकार हैं:

.col-xs-3 {
 flex-basis: 25%;
 max-width: 25%;
 }
0
Dani 26 फरवरी 2020, 02:32
अधिकांश लोग क्षतिपूर्ति के लिए calc() का उपयोग करते हैं। यदि आपके पास 3 तत्व हैं, तो आपके पास 30px के 2 गटर होंगे। फिर आप calc(50% - (30px * 2) / 3) और calc(25% - (30px * 2) / 3) करेंगे
 – 
chriskirknielsen
26 फरवरी 2020, 02:37
क्या आपने box-sizing की परिभाषा बदलने की कोशिश की है? आप या तो border-box या content-box का उपयोग कर सकते हैं।
 – 
Mihail Minkov
26 फरवरी 2020, 02:44

3 जवाब

मुझे लगता है कि box-sizing परिभाषा का उपयोग करके आपकी समस्या को ठीक किया जा सकता है।

आप देख सकते हैं कि यह निम्न उदाहरण पर कैसे काम करता है।

यहाँ दोनों के बीच अंतर का एक उदाहरण है। आप बॉक्स-साइज़िंग यहां के बारे में अधिक जानकारी प्राप्त कर सकते हैं।

#content-box,
#border-box {
  width: 300px;
  height: 100px;
  padding: 30px;
}

#content-box {
  background: red;
  color: white;
  box-sizing: content-box;
}

#border-box {
  background: green;
  color: white;
  box-sizing: border-box;
}
<div id="content-box">I am a 300px wide div using content-box.</div>

<div id="border-box">I am also a 300px wide div, but I am using border-box.</div>
0
Mihail Minkov 26 फरवरी 2020, 02:50

यह स्पष्ट नहीं है कि आप bootstrap का उपयोग करते हैं या यदि यह घर पर बना है class

शुद्ध CSS flex के साथ, यदि आप margin जोड़ना चाहते हैं, तो flex-basis का उपयोग न करें लेकिन flex-grow। यह किसी भी box-sizing मान के साथ भी काम करता है।

.row {display:flex;}

.item {border:solid;margin:20px;}
.col-xs-6 {flex:6;}/* shorthand reduce to minimal */
.col-xs-3 {flex:3;}
<div class="grid-items row">
<div class="item item-50 col-xs-6">
    <div class="text">
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
</div>

<div class="item col-xs-3">
    <h2>Lorem Ipsum is simply dummy text</h2>
</div>
<div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
</div>

ब्रेक पॉइंट के लिए, आप मार्जिन सहित पूरी पंक्ति को भरने के लिए अपनी मीडिया क्वेरीज़ में min-width:90% का उपयोग कर सकते हैं। अस्वीकरण: क्या इस भाग को स्पष्ट करने की आवश्यकता है? यदि हां, तो इसे अपने प्रश्न में जोड़ें;) उदाहरण नीचे

.row {
  display: flex;  
  gap: 30px;  /* this can be used instead margin on the child, see caniuse.com where it works 
 only avalaible in FF at this time  in a flex box*/
}

.item {
  border: solid;
}

.col-xs-6 {
  flex: 6
}

.col-xs-3 {
  flex: 3
}

@media screen and (max-width:500px) {/* play the snippet in fullpage to resize window */
  .row {
    flex-wrap: wrap;
  }
  .item {
    min-width: 90%;/* flex-grow will do the next 10% */
  }
}
<div class="grid-items row">
  <div class="item item-50 col-xs-6">
    <div class="text">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
  </div>

  <div class="item col-xs-3 mlr-30px">
    <h2>Lorem Ipsum is simply dummy text</h2>
  </div>
  <div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
  </div>
0
G-Cyrillus 26 फरवरी 2020, 03:24

मुझे ऐसा लगता है कि आपको बस उन सभी कॉलम वर्गों (जैसे .col-xs-3) में flex-shrink: 1 जोड़ना होगा। यह कॉलम को थोड़ा छोटा करने की अनुमति देगा और बिना किसी अतिप्रवाह के दी गई चौड़ाई में सब कुछ फिट कर देगा।

0
Johannes 26 फरवरी 2020, 03:43