时间戳

首页 > 解决方案 > 内容太宽时 Flexbox 不换行

css - 内容太宽时 Flexbox 不换行

问题描述

我有一个带有 flexbox 的两列布局，并flex-wrap: wrap设置在列的父级上。但是，即使内容明显比列设置的宽度百分比宽，列也不会换行。当内容比百分比宽度宽时，如何让列换行？

.wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  width: 300px;
}
.left {
  width: 60%;
  background-color: lightblue;
}
.right {
  width: 40%;
  background-color: lightcoral;
}
<div class="wrapper">
  <div class="left">
    <table><tbody>
      <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td></tr>
    </tbody></table>
  </div>
  <div class="right"></div>
</div>

标签： cssflexbox

解决方案

列没有换行，因为列没有增长。您可以通过将width列的属性更改为属性来解决此问题flex-basis。flex-basis 是 flex 计算的起点，但宽度会根据需要进行调整。有关更多详细信息，请参阅flex-basis 和 width 之间的区别。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  width: 300px;
}
.left {
  flex-basis: 60%;
  background-color: lightblue;
}
.right {
  flex-basis: 40%;
  background-color: lightcoral;
}
<div class="wrapper">
  <div class="left">
    <table><tbody>
      <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td></tr>
    </tbody></table>
  </div>
  <div class="right"></div>
</div>

推荐阅读