Html 使用列宽和内联块至少两行

我试图将内联块分成列，从每列中的一项开始。相反，它给了我一列中的两个块。我能做些什么来改变这种行为

.集装箱{
背景:#f99；
列宽：130px；
}
.项目{
背景：#9f9；
宽度：130px；
高度：40px；
保证金：5px；
文本对齐：居中；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
字号：2em；
字体系列：monospace；
}
A.
B
C
D
E
G
H
我
F

使用

列计数

CSS属性

.item{
column-count:3;
}

如果您想设置宽度，可以使用

列间距

属性设置宽度

试试这个

  .container {
  background: #f99;
  width:280px;
  display: flex;
  text-align: center;
  align-items: center;
  flex-wrap:wrap;
}

.item {
  background: #9f9;
  width: 130px;
  height: 220px;
  margin: 5px;
  justify-content: center;
  font-size: 2em;
}

---

我希望这就是你想要的。如果不是，请告诉我确切的要求

这当然也是正确的行为，但我必须使用列宽/列计数，因为我们希望项目级联，而不是每行占用一个项目。

  .container {
  background: #f99;
  width:280px;
  display: flex;
  text-align: center;
  align-items: center;
  flex-wrap:wrap;
}

.item {
  background: #9f9;
  width: 130px;
  height: 220px;
  margin: 5px;
  justify-content: center;
  font-size: 2em;
}