Question

是否可以在100%包装器中放置宽度为flex-wrap: wrap;的包装器，并且只有flex-wrap: wrap;包装器100%更小的包装器才会发生.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%; }效果比x的像素数量？

示例网站here

＆＃13;

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

＆＃13;

[Authorize]

＆＃13;

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

Flex-wrap：wrap - image + wrapper，宽度为100％

1 个答案: