我有一个flexbox,可以包含任意数量的项目,我已经将其设置为特定大小.

当我有一堆物品在里面时,这些物品会垂直地挤在一起,这是我想要的行为,但如果只有少数物品,它们会留出空间来均匀地填充垂直空间.我怎样才能让他们总是挤在一起?

.container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-direction: row;
  border: solid;
  flex-wrap: wrap;
  overflow-y: auto;
}
.flex-1 {
  height: 100px;
  width: 100px;
  background-color: blue;
  border: solid;
}
<p>The blue boxes should be flush against each other vertically</p>

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>
<br>
<p>When there's a whole bunch it works correctly</p>
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>

JSFiddle

推荐答案

加入你的容器align-content: flex-start;

.container {
  display: block;
  height: 300px;
  width: 500px;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  border: solid;
  flex-wrap: wrap;
  overflow-y: auto;
}
.flex-1 {
  height: 100px;
  width: 100px;
  background-color: blue;
  border: solid;
}
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>
<br>
When there's a whole bunch it works correctly
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>

Html相关问答推荐

Flexbox嵌套div溢出

当使用浮动标签和大小时,如何在 Select 组件中有更多可见选项?

在iOS中调整HTML邮箱内容的大小

如何使用html和css关键帧创建动画

如何在将文本垂直居中的同时将文本右对齐?

使用响应迅速的网格系统,将两列保持在同一行,同时允许更多列用于更大的屏幕

响应网格,响应调整大小以适应父div,保留父div S自己的响应高度

你将如何为手机制作导航栏

阴影部分内部的ionic Select 元素

当div位于flexbox中时,如何使div的宽度与高度相同

从触发元素移动到有间隙的内容时 CSS 工具提示关闭

排列卡片时遇到困难

当我们在vue中使用截断大文本时如何显示标题属性?

如何使用html css将图像显示为附加形状

如何消除线性渐变线的模糊?

视频添加到 Html 与 Github 不同步

HTML 如何根据屏幕尺寸调整/裁剪视频背景?

如何使用 CSS 和 HTML 将文本放入图像中?

在 SQL 中合并 HTML 表中的单元格

表格布局:固定;文本溢出单元格时不起作用