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

时间：2017-07-28 17:49:24

标签： html css css3 flexbox

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

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

这与flex有关吗？你知道该怎么办吗？

我试图这样做：https://jsfiddle.net/18mzsqcx/1/，但它无效。

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

＆＃13;
＆＃13; 
*,
*: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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：5)

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

所以你要做的第一件事就是将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; }

revised demo 

*,
*: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>

答案 1 :(得分：2)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

Flex-grid使网格的生活非常简单。

HTML 

<div class="flex-grid">
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
</div>

CSS 

.flex-grid {
  display: flex;
}
.flex-col {
  flex: 1;
}

https://jsfiddle.net/wh03p4s5/

相关问题
最新问题