Fullwidth und mehrere Spalten mit Flexbox

Question

Ich versuche, eine flexbox Zeile mit voller Breite und mehrere Spalten auf dem gleichen Container zu erstellen.

Ich habe versucht aber bin mir nicht sicher, was ich vermisse. Ich versuche zu vermeiden, mehrere Klassen wie .fullwidth und .multiple-columns zu haben.

Das ist, was ich versuche zu erreichen:

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

Sie müssen flex-wrap: wrap auf flex Behälter setzen, und dann flex: 0 0 100% auf voller Breite Artikel und flex: 0 0 50% auf Halbseiten. Außerdem sollten Sie box-sizing: border-box hinzufügen.

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