代码之家 › 专栏 › 技术社区 › Alex Craft

是否仅将元素列表显示为带有CSS的表?

flexbox css3 css

Alex Craft · 技术社区 · 6 年前

将列表显示为具有3列的表,项目均匀分布,并且 10px 每边和行之间的边距。

.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }

<div class="grid">
  <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>

应呈现为

这是有可能实现的 flex 布局,但它需要更复杂的HTML,请参见下面的示例。

.item { width: 10px; height: 10px; background: black; }

.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0;  }

<div class="grid">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
 </div>

我想知道在不添加任何额外HTML元素的情况下,是否可以使用纯CSS。大小 .items 不应该改变,这是未知的。

2 回复 | 直到 6 年前

Temani Afif 6 年前

您可以通过在第一行和最后一行之间添加隐藏元素来使用flexbox。 width:100% 因此,您将避免更改HTML:

.item {
  width: 10px;
  height: 10px;
  background: black;
}

.row {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #eee;
  flex-wrap: wrap;
}

.row:after {
  content: "";
  width: 100%;
  height: 10px;
}

.row :nth-child(n + 4) {
  order: 1;
}

<div class="row">
  <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>

如果元素的数目未知,可以考虑使用CSS网格:

.item {
  width: 10px;
  height: 10px;
  background: black;
}
.row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
  padding:10px;
  background: #eee;
}
.row :nth-child(3n + 2) {
  margin:auto;
}
.row :nth-child(3n + 3) {
  margin-left:auto;
}

<div class="row">
  <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 class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Siddhesh Rane 6 年前

Temani Afif 写了一个很好的答案。flexbox 1只适用于2到3行,但网格版本适用于更多项目。

网格CSS可以通过使用 space-between 从而摆脱了利润和 n-th child 选择器。

.item {
   width: 10px;
   height: 10px;
   background: black;
}
   
.row {
   display: grid;
   grid-template-columns: repeat(3,10px); /*change this*/
   grid-gap: 10px;
   padding:10px;
   background: #eee;
   justify-content: space-between;  /*add this*/
 }

<div class="row">
  <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 class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>