时间戳

首页 > 解决方案 > 使用 flexbox 控制一行中的项目数

html - 使用 flexbox 控制一行中的项目数

问题描述

我想在第一行显示 4 个项目，但在第二行只有 3 个，然后在第三行显示 4 个，在第四行显示 3 个，依此类推......

我已经实现了这一点，nth-child但是代码太多，不灵活和可扩展。

flex可以吗？还是网格？

* {
  box-sizing: border-box;
}

.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-wrapper .grid-item {
  width: 25%;
  text-align: center;
  padding: 5px;
}

p {
  background: #ddd;
  padding: 15px;
}
<div class="grid-wrapper">
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>


</div>

标签： htmlcssflexbox

解决方案

您只需要考虑如下一条规则：

 /*7 = 4 (1st row) + 3 (2nd row) and 5 = 1st element in 2nd row (4 + 1)*/
.grid-wrapper .grid-item:nth-child(7n + 5) {
  width: calc(100%/3);
  flex-grow:0;
}

诀窍是使一个元素更大以触发换行，然后依靠flex-grow填充空间。

完整代码

* {
  box-sizing: border-box;
}

.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-wrapper .grid-item {
  width: 25%;
  text-align: center;
  padding: 5px;
  flex-grow: 1;
}

.grid-wrapper .grid-item:nth-child(7n + 5) {
  width: calc(100%/3);
  flex-grow:0;
}

p {
  background: #ddd;
  padding: 15px;
}
<div class="grid-wrapper">
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div><div class="grid-item">
    <p>Grid Item</p>
  </div>
</div>

推荐阅读