时间戳

首页 > 解决方案 > Flexbox 列布局不换行

css - Flexbox 列布局不换行

问题描述

我是 flexbox css 的新手。我有一个包含一些“单元格”（div）的 div，请参阅以下标记：

<div class="outer">
  <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

这是我的 CSS（scss）：

.outer {
  width: 600px;
  height: 300px;
  border: 5px solid black;
}

.inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  flex-grow: 0;
  flex-basis: 100px;
  box-sizing: border-box;
  
  @for $i from 1 through 9 {
    &:nth-child(#{$i}){
      border: 3px solid rgb(random(255),random(255),random(255));
    }
  }
}

问题是当单元格到达包装器 div 中可用空间的末尾时，我无法使它们换行。我错过了什么吗？

标签： cssflexbox

解决方案

我猜您的css 声明集中height: 100%;缺少此规则。.inner否则浏览器不知道何时“开始包装”:)

推荐阅读