html - flex 包装 : wrap - image + wrapper with width 100%

Question

是否可以在 flex-wrap: wrap; 包装器中使用宽度为 100% 的包装器，并且只制作 flex-wrap: wrap; 如果 100% 的 wrapper 小于 x 个像素，效果会发生吗？

示例站点 here

.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 可以作为断点，flex boxes 可以叠加。

一些更新: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 to play with, it has been updated from comments below where only img gets min-width