Question

我想要一个满足以下条件的容器：

它有2行，列数不受限制
其中的所有项目均为一词文本元素，其宽度
其中所有项目的宽度相等，由最宽的元素（最长的单词）定义

我当时正在考虑使用Flexbox。由于所有项目的高度都已知（因为它们是一行文本），因此我可以这样定义可包装容器：

display: flex;
flex-flow: column wrap;
height: 100px;

同一列内的所有项目的宽度均相等。但我希望所有项目都具有相同的宽度。我应该使用网格吗？如果是，怎么办？

Answer 1

如果您希望所有项目都具有相同的宽度，则需要在其类中定义它们的宽度。

.container{
display: flex
height: 100px
}

.container__item{
width: 20px
height: 100%:
}

根据您的喜好更改宽度。

Answer 2

您可以尝试如下所示的CSS网格：

.grid {
  display: inline-grid;
  grid-template-rows: 1fr 1fr; /*two equal rows*/
  grid-auto-columns: 1fr; /*all columns will be equal*/
  grid-auto-flow: column;
}

span {
  outline: 1px solid;
  padding: 5px
}

<div class="grid">
  <span>some_text</span>
  <span>text_long</span>
  <span>text</span>
  <span>a</span>
  <span>text</span>
  <span>some_text</span>
  <span>some_looong_text</span>
  <span>some_text</span>
</div>

具有自适应宽度的网格状容器

2 个答案: