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