Tam kutu ve birden çok sütun flexbox kullanarak

Question

Aynı kapsayıcıda tam genişlik ve birden çok sütun içeren bir flexbox satırı oluşturmaya çalışıyorum.

flex-break: after;'u denedim ancak eksik olduğumdan emin değilim. .fullwidth ve .multiple-columns gibi birden çok sınıfa sahip olmaktan kaçınmaya çalışıyorum.

------------------------ 
|      | 
|      | 
|  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

Sen esnek ambalaj üzerinde flex-wrap: wrap ayarlamak gerekir ve tam genişliğine sonra flex: 0 0 100%:

Bu

Ben başarmak için çalışıyorum budur yarı genişlikte öğeler için flex: 0 0 50% ürününü. Ayrıca box-sizing: border-box'u eklemelisiniz.

* { 
 
    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>