具有三（3）行和四（4）列的Flexbox网格

Question

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

但是我只想在一行中有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>

Answer 1

默认情况下，flex容器设置为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; }

修改后的演示

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

.categories_item { flex-grow: 1; }