具有三 (3) 行和四 (4) 列的 flexbox 网格

Question

我有一个 div，我有 12 个项目使用 flex 在中心对齐。

但我只想在一行中有 4 个项目，所以我想要 3 行 4 列。

这可以用 flex 做吗？你知道该怎么做吗？

我正在尝试这样做： https ://jsfiddle.net/18mzsqcx/1/，但它不起作用。

或者最好只创建一个 div，例如 .col4 宽度等于 25% 和一些边距，并将此类 .col4 放在每个项目中？

 *,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container {
  float: left;
  width: 100%;
  background-color: red;
}

.content {
  width: 94%;
  margin: 0px auto;
  background-color: yellow;
  padding: 30px;
}

.categories {
  display: flex;
  justify-content: space-between;
  background-color: blue;
}

.categories_item a {
  color: green;
}

.categories_item {
  flex-grow: 1;
}

 <div class="container">
  <div class="div content">

    <div class="categories">
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

    </div>
  </div>
</div>

原文由 user8381864 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认情况下，弹性容器设置为 flex-wrap: nowrap 。这意味着弹性项目将无法换行。

所以你应该做的第一件事是将 flex-wrap: wrap 添加到你的容器中。

 .categories {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;  /* NEW */
}

然后，定义您的弹性项目，以便只有四个可以放在一行中。

而不是这个：

 .categories_item { flex-grow: 1; }

试试这个：

 .categories_item { flex: 1 0 20%; margin: 5px; }

修改后的演示

 *,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  float: left;
  width: 100%;
  background-color: red;
}

.content {
  width: 94%;
  margin: 0px auto;
  background-color: yellow;
  padding: 30px;
}

.categories {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;                /* NEW */
}

.categories_item a {
  color: white;
}

.categories_item {
  flex: 1 0 20%;                 /* NEW */
  margin: 5px;                   /* NEW */
  background-color: blue;
}

 <div class="container">
  <div class="div content">
    <div class="categories">
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
    </div>
  </div>
</div>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这样就可以了，将三个元素放在一个 div 中，因此 12 个项目将有 4 个 div

 .container {
  float: left;
  width: 100%;
  background-color: red;
}

.content {
  width: 94%;
  margin: 0px auto;
  background-color: yellow;
  padding: 30px;
}

.categories {
  display: flex;
  justify-content: space-between;
  background-color: blue;
}

.categories_item a {
  color: green;
}

.categories_item {
  flex-grow: 1;
}

 <div class="container">
  <div class="div content">

    <div class="categories">
      <div id="row">

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>
      </div>
      <div id="row">
        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>
        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>
      </div>
      <div id="row">
        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

原文由 siawo 发布，翻译遵循 CC BY-SA 3.0 许可协议