Flexbox收缩和不换行

Question

Flexbox收缩和不换行

3

我正在尝试使用flexbox使两个并排的div包裹。当我只有div和背景颜色时，它可以正常工作，但是当我开始添加更多项目时，它停止工作了。这些div开始缩小而不是换行。我尝试了flex-shrinking: 0;和其他在其他网站上找到的技巧。无论如何，以下是代码：

.page4 {
  height: 100%;
  width: 100%;
  margin: auto;
}

h2 {
  text-align: center;
  margin: 0 auto;
  width: 65%;
}

.flex-content {
  margin: auto;
  display: flex;
  flex-shrink: 0;
  width: 80%;
  height: 500px;
  margin-top: 30%;
}

.left {
  align-items: center;
  display: block;
  float: left;
  padding-right: 5px;
  background-color: blue;
  width: 45%;
  height: 500px;
}

.background {
  background-image: url('../pictures/weenies/longpaper.png');
}

.right {
  align-items: center;
  display: block;
  float: right;
  background-color: red;
  width: 45%;
  height: 500px;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#logopg4 {
  height: 300px;
  width: 300px;
}

.logopg4 {
  text-align: center;
  display: block;
}

<div class="page4">
  <div class="flex-content wrap">
    <div class="left">
      <div class="subs">
        <h2>Subs N'</h2>
        <h2>Sandwiches</h2>
        <div class="subsNSandwiches background">

        </div>
      </div>
      <div class="hen">
        <h2>Hen House</h2>
        <div class="henpaper background">

        </div>
      </div>
      <div class="deezerts">
        <h2>DEEZERTS</h2>
        <div class="deezertspaper background">

        </div>
      </div>
    </div>
    <div class="right">
      <div class="logopg4">
        <img src="./pictures/subs/logo2.png" id="logopg4" />
      </div>
      <div class="rabbit">
        <h2>Rabbit Fixin's</h2>
        <div class="rabbitFixins background">

        </div>
      </div>
      <div class="xtraFixins">
        <h2>Xtra Fixin's</h2>
        <div class="xtrapaper background">

        </div>
      </div>
    </div>
  </div>
</div>

我省略了HTML文件中的其他代码。非常感谢任何能提供关于这个问题见解的人。

- Jacob Staggs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Johannes · Accepted Answer

你在弹性项目 (.left 和 .right) 中定义了宽度为 45%，因此它们的宽度始终为 45%，并且永远不会换行。

你可以添加一个最小宽度以避免这种情况 - 在下面的示例中，我给这两个元素添加了 min-width: 400px。

.page4 {
  height: 100%;
  width: 100%;
  margin: auto;
}

h2 {
  text-align: center;
  margin: 0 auto;
  width: 65%;
}

.flex-content {
  margin: auto;
  display: flex;
  flex-shrink: 0;
  width: 80%;
  height: 500px;
  margin-top: 30%;
}

.left {
  align-items: center;
  display: block;
  float: left;
  padding-right: 5px;
  background-color: blue;
  width: 45%;
  min-width: 400px;
  height: 500px;
}

.background {
  background-image: url('../pictures/weenies/longpaper.png');
}

.right {
  align-items: center;
  display: block;
  float: right;
  background-color: red;
  width: 45%;
  min-width: 400px;
  height: 500px;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#logopg4 {
  height: 300px;
  width: 300px;
}

.logopg4 {
  text-align: center;
  display: block;
}

<div class="page4">
  <div class="flex-content wrap">
    <div class="left">
      <div class="subs">
        <h2>Subs N'</h2>
        <h2>Sandwiches</h2>
        <div class="subsNSandwiches background">

        </div>
      </div>
      <div class="hen">
        <h2>Hen House</h2>
        <div class="henpaper background">

        </div>
      </div>
      <div class="deezerts">
        <h2>DEEZERTS</h2>
        <div class="deezertspaper background">

        </div>
      </div>
    </div>
    <div class="right">
      <div class="logopg4">
        <img src="./pictures/subs/logo2.png" id="logopg4" />
      </div>
      <div class="rabbit">
        <h2>Rabbit Fixin's</h2>
        <div class="rabbitFixins background">

        </div>
      </div>
      <div class="xtraFixins">
        <h2>Xtra Fixin's</h2>
        <div class="xtrapaper background">

        </div>
      </div>
    </div>
  </div>
</div>