我如何使用flexx指定两个div必须断行在一起?

Question

如何使用flexx指定两个div必须断行在一起?我在下面的例子中想要的是，当屏幕变小时，绿色和黑色div总是一起跳到新的行，而不必在新的div中嵌套它们，这会使代码复杂化和扩展。

.categories-home-block {
display:flex; 
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
align-items: center;
margin: 10px -8px;
}
.category-home-card {
flex-grow: 1;
}
.category-home-pic{
width: auto;
margin: 25px 5px;
height: 400px;
min-width: 200px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.category-home-pic-1 {
margin-left: 0;
background-color:red;
}
.category-home-pic-2 {
background-color:blue;
}
.category-home-pic-3 {
background-color:yellow;
}
.category-home-pic-4 {
background-color:green;
}
.category-home-pic-5 {
margin-right: 0;
background-color:black;
}
.category-home-link {
justify-content: center;
text-align: center;
}
.category-home-link a {
font: normal 400 18px/22px Montserrat, sans-serif;
text-decoration: none;
color: #252a32;
}

<div class="categories-home-block">
<div class="category-home-card">
<div class="category-home-pic category-home-pic-1"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-2"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-3"></div>
<div class="category-home-link">
</div>
</div>
<div style="display: flex;">
<div class="category-home-card">
<div class="category-home-pic category-home-pic-4"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-5"></div>
<div class="category-home-link">
</div>
</div>
</div>
</div>

Answer 1

.categories-home-block {
display:flex; 
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
align-items: center;
margin: 10px -8px;
}
.category-home-card {
flex-grow: 1;
}
.category-home-pic{
width: auto;
margin: 25px 5px;
height: 400px;
min-width: 200px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.category-home-pic-1 {
margin-left: 0;
background-color:red;
}
.category-home-pic-2 {
background-color:blue;
}
.category-home-pic-3 {
background-color:yellow;
}
.category-home-pic-4 {
background-color:green;
}
.category-home-pic-5 {
margin-right: 0;
background-color:black;
}
.category-home-link {
justify-content: center;
text-align: center;
}
.category-home-link a {
font: normal 400 18px/22px Montserrat, sans-serif;
text-decoration: none;
color: #252a32;
}
/* shaping flex-green-black  */
.flex-green-black {
display: flex;
flex-wrap:wrap;
}

<div class="categories-home-block">
<div class="category-home-card">
<div class="category-home-pic category-home-pic-1"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-2"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-3"></div>
<div class="category-home-link">
</div>
</div>
<!--creation of a class named: flex-green-black  -->
<div class="flex-green-black">
<div class="category-home-card">
<div class="category-home-pic category-home-pic-4"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-5"></div>
<div class="category-home-link">
</div>
</div>
</div>
</div>