使用flexbox的全寬和多列

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容器，然後在全寬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>