Question

我试图了解如何使用弹性框获得我想要的效果但是我使用百分比得到了不可预测的结果，我无法理解为什么。

目标是将一个带有3个方形物品的方形容器作为“弹性行”。如果我有一个容器大小 - 500px x 500px，我的项目高度/宽度设置为50％，我左右不应该有一个完美的方形黄色方框，右上角旁边是方形橙红色，然后红色的盒子不会被推到一个开始新行的黄色盒子下面吗？这个想法是 - 随着窗口尺寸变小，橙色红色将像黄色一样在黄色和红色之间推动 - 但它将是3行1

.container {
  margin-right: 3em;
  margin-left: 33m;
  display: flex;
  flex-direction: row;
  background-color: gray;
  height: 500px;
  width: 500px;
}
#item-1 {
  height: 50%;
  width: 50%;
  background-color: yellow;
}
#item-2 {
  height: 50%;
  width: 50%;
  background-color: orangered;
}
#item-3 {
  height: 50%;
  width: 50%;
  background-color: red;
}

<div class="container">
  <div class="item" id="item-1"></div>
  <div class="item" id="item-2">
    <div class="accordian"></div>
  </div>
  <div class="item" id="item-3"></div>
</div>

JSFiddle：https://jsfiddle.net/2o86nocc/2/#&togetherjs=JLLUCFSHMp

Answer 1

为了将红色框包装到下一行，您必须通过在容器上设置flex-wrap: wrap;来启用Flexbox wrapping。默认情况下不启用。

See the edited fiddle here

＆＃13;

.container {
  margin-right: 3em;
  margin-left: 33m;
  display: flex;
  flex-direction: row;
  background-color: gray;
  height: 500px;
  width: 500px;

  flex-wrap: wrap;
}
#item-1 {
  height: 50%;
  width: 50%;
  background-color: yellow;
}
#item-2 {
  height: 50%;
  width: 50%;
  background-color: orangered;
}
#item-3 {
  height: 50%;
  width: 50%;
  background-color: red;
}

＆＃13;

<div class="container">
  <div class="item" id="item-1"></div>
  <div class="item" id="item-2">
    <div class="accordian"></div>
  </div>
  <div class="item" id="item-3"></div>
</div>

＆＃13;

了解弹性框

1 个答案: