时间戳

首页 > 解决方案 > 当列的宽度不适合其容器时，如何垂直包装列？

html - 当列的宽度不适合其容器时，如何垂直包装列？

问题描述

我在将 flexbox 包装成列时遇到问题。容器不适合内容宽度，如下面的片段所示。

如果您同时替换 和 ，则此方法有效，高度flex-flow适合其子项的内容高度，但问题是列随后水平流动并出现在彼此下方，而不是垂直流动并彼此并排。.wrapper.containerflex-flow: row wrap

我期待以下结果： 预期结果

.wrapper {
  display: flex;
  flex-flow: column wrap;
  max-height: 500px;
  max-width: 500px;
  overflow: scroll;
}

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  background-color: red;
  margin: 5px;
}

.product {
  margin: 3px;
  min-width: 100px;
  min-height: 100px;
  background-color: #ccc;
  text-align: center;
  font-weight: bold;
  line-height: 100px;
}
<div class='wrapper'>
  <div class='container'>
    <div class="product">0.1</div>
    <div class="product">0.2</div>
    <div class="product">0.3</div>
    <div class="product">0.4</div>
    <div class="product">0.5</div>
    <div class="product">0.6</div>
    <div class="product">0.7</div>
    <div class="product">0.8</div>
  </div>
  <div class='container'>
    <div class="product">1.1</div>
    <div class="product">1.2</div>
    <div class="product">1.3</div>
    <div class="product">1.4</div>
    <div class="product">1.5</div>
    <div class="product">1.6</div>
    <div class="product">1.7</div>
    <div class="product">1.8</div>
  </div>
  <div class='container'>
    <div class="product">2.1</div>
    <div class="product">2.2</div>
    <div class="product">2.3</div>
    <div class="product">2.4</div>
    <div class="product">2.5</div>
    <div class="product">2.6</div>
    <div class="product">2.7</div>
    <div class="product">2.8</div>
  </div>
  <div class='container'>
    <div class="product">3.1</div>
    <div class="product">3.2</div>
    <div class="product">3.3</div>
    <div class="product">3.4</div>
    <div class="product">3.5</div>
    <div class="product">3.6</div>
    <div class="product">3.7</div>
    <div class="product">3.8</div>
  </div>
</div>

标签： htmlcssflexbox

解决方案

问题是.container没有width定义，所以如何.wrapper有最大的 with 并且它是一个 Flexbox，所有的孩子（.container）都会自动适应他们的父母，这就是问题所在。

您可以通过为容器类设置一个 with 来解决它。

像这样的东西：width: 212px;

推荐阅读