弹性包装:包装 - 图像 + 宽度为 100% 的包装器

Question

是否可以在flex-wrap: wrap;包装器内有一个宽度为100%的包装器，并且只有在具有100%的包装器小于 x 像素量时才发生flex-wrap: wrap;效果？

示例网站在这里

.wrapper1 {
display: flex;
flex-wrap: wrap;
}
.innerWrapper1 {
width: 100%;
}
.facebook1 {
background-color: #3a559f;
height: 50px;
width: 100%;
}
.twitter1 {
background-color: #50abf1;
height: 50px;
width: 100%;
}
.google1 {
background-color: #dc4e41;
height: 50px;
width: 100%;
}
.wrapper2 {
display: flex;
/*flex-wrap: wrap;*/
}
.innerWrapper2 {
width: 100%;
}

<h2>Sample 1 flex-wrap wrap</h2>
<div class="wrapper1">
<img src="http://www.xch07.wi2.sde.dk/sandbox/VIGTIG/LOGIN/loginAdminBackup8/uploads/pernille_8.jpg" alt="some image">
<div class="innerWrapper1">
<div class="facebook1"></div>
<div class="twitter1"></div>
<div class="google1"></div>
</div>
</div>
<h2>No flex-wrap wrap but what i want</h2>
<div class="wrapper2">
<img src="http://www.xch07.wi2.sde.dk/sandbox/VIGTIG/LOGIN/loginAdminBackup8/uploads/pernille_8.jpg" alt="some image">
<div class="innerWrapper2">
<div class="facebook1"></div>
<div class="twitter1"></div>
<div class="google1"></div>
</div>
</div>

Answer 1

min-width可以用作断点，并且可以嵌入弹性框。

一些更新：min-width每次划分300px到达时都会包装元素。

Ff 3 元素设置为min-width: 300px个，一个元素在900px处下降，下一个在600px处下降，一旦达到300px，就会显示滚动条。

对代码进行的更新

.wrapper1 > img,
.innerWrapper1 {
flex: 1;
min-width: 320px;
}
.innerWrapper1 {
flex-direction: column;
display: flex;
}
.innerWrapper1 > div {
flex: 1;
}
.facebook1,
.twitter1,
.google1 {
min-height: 50px;
}

.wrapper1 {
display: flex;
flex-wrap: wrap;
}
.wrapper1 > img,
.innerWrapper1 {
flex: 1;
min-width: 320px;
}
.innerWrapper1 {
flex-direction: column;
display: flex;
}
.innerWrapper1 > div {
flex: 1;
}
.facebook1 {
background-color: #3a559f;
min-height: 50px;
width: 100%;
}
.twitter1 {
background-color: #50abf1;
min-height: 50px;
width: 100%;
}
.google1 {
background-color: #dc4e41;
min-height: 50px;
width: 100%;
}
h3 {
color: #dc4e41;
background: lightgreen;
text-shadow: 0 0 1px gold, 0 0 1px gold, 0 0 1px gold, 0 0 1px gold, 0 0 1px gold, 0 0 1px gold, 0 0 2px black;
text-align: center;
}

<h2>Sample 1 flex-wrap wrap + break point at average 640px via min-width:320px</h2>
<h3>load on full page mode to test behavior/breakpoint</h3>
<div class="wrapper1">
<img src="http://www.xch07.wi2.sde.dk/sandbox/VIGTIG/LOGIN/loginAdminBackup8/uploads/pernille_8.jpg" alt="some image">
<div class="innerWrapper1">
<div class="facebook1"></div>
<div class="twitter1"></div>
<div class="google1"></div>
</div>
</div>
imbricate flexbox involved

Codepen 可以使用，它已从下面的评论中更新，只有 img 可以min-width