फ्लेक्सबॉक्स

Question

का उपयोग कर फुलविड्थ और एकाधिक कॉलम मैं एक पूर्ण कंटेनर पर पूर्णविड्थ और एकाधिक कॉलम के साथ flexbox पंक्ति बनाने की कोशिश कर रहा हूं।

मैंने flex-break: after; कोशिश की है लेकिन मुझे यकीन नहीं है कि मैं क्या खो रहा हूं। मैं .fullwidth और .multiple-columns जैसे कई वर्गों से बचने की कोशिश कर रहा हूं।

------------------------ 
|      | 
|      | 
|  item A   | 
|      | 
|      | 
------------------------ 
|   |   | 
|   |   | 
|  B |  C | 
|   |   | 
|   |   | 
------------------------ 
|      | 
|      | 
|  item D   | 
|      | 
|      | 
------------------------ 

.collage { 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
} 
 
.fullwidth { 
 
    flex-break: after; 
 
} 
 
.collage-item { 
 
    width: 100%; 
 
    height: 25vw; 
 
    background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat; 
 
    background-size: cover; 
 
} 
 
.btn { 
 
    position: absolute; 
 
    border: 2px solid white; 
 
    padding: 10px 18px; 
 
    text-align: center; 
 
    right: 8px; 
 
    bottom: 8px; 
 
    color: white; 
 
    text-decoration: none; 
 
}

<div class="collage"> 
 
    <!-- fullwidth --> 
 
    <div class="collage-item fullwidth"></div> 
 

 
    <!-- two columns --> 
 
    <div class="collage-item"></div> 
 
    <div class="collage-item"></div> 
 

 
    <!-- fullwidth --> 
 
    <div class="collage-item fullwidth"></div> 
 
    <div class="btn">Button</div> 
 
</div>

https://jsfiddle.net/brunodd/ja6820vu/1/

Answer 1

आप फ्लेक्स कंटेनर पर flex-wrap: wrap निर्धारित करने की आवश्यकता है, और फिर flex: 0 0 100% पूर्ण-चौड़ाई पर:

यह मैं क्या हासिल करने की कोशिश कर रहा हूँ वस्तुओं और flex: 0 0 50% आधा चौड़ाई वस्तुओं पर। आपको box-sizing: border-box जोड़ना चाहिए।

* { 
 
    box-sizing: border-box; 
 
} 
 
.collage { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.collage-item { 
 
    border: 1px solid black; 
 
    flex: 0 0 50%; 
 
    padding: 10px; 
 
} 
 
.fullwidth { 
 
    flex: 0 0 100%; 
 
}

<div class="collage"> 
 
    <!-- fullwidth --> 
 
    <div class="collage-item fullwidth">a</div> 
 

 
    <!-- two columns --> 
 
    <div class="collage-item">b</div> 
 
    <div class="collage-item">c</div> 
 

 
    <!-- fullwidth --> 
 
    <div class="collage-item fullwidth">d</div> 
 
</div>