具有三（3）行和四（4）列的Flexbox网格 [英] A flexbox grid with three (3) rows and four (4) columns

问题描述

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

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

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

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

*，*：after，*：before {margin：0;填充：0;盒子尺寸：边框; -moz-box-sizing：border-box; -webkit-box-sizing：border-box;}。container {float：left;宽度：100％; background-color：red;}。content {width：94％; margin：0px auto;背景颜色：黄色; padding：30px;}。categories {display：flex;证明内容：空间之间;如果您的网站使用的是HTML代码，那么您可以使用以下代码来创建一个HTML代码：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 => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < div class =categories_item> < a href =class => <跨度>项目< /跨度> < / A> < / DIV> < / DIV> < / div>< / div>  

解决方案

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

所以你应该做的第一件事是添加 flex-wrap：wrap


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

然后，定义您的flex项目，

而不是：

  .categories_item {flex-grow：1; } 
  

试试这个：

  .categories_item {flex：1 0 20％; margin：5px; } 
  

修改了演示版本

*，*：之后，*：{margin：0;填充：0; box-sizing：border-box;} container {float：left;宽度：100％; background-color：red;}。content {width：94％; margin：0px auto;背景颜色：黄色; padding：30px;}。categories {display：flex;证明内容：空间之间; flex-wrap：wrap; / * NEW * /}。categories_item a {color：white;}。categories_item {flex：1 0 20％; / * NEW * / margin：5px; / * new * / background-color：blue;}

I have a div and I have 12 items aligned at center using flex.

But I just want to have 4 items in row, so I want 3 rows of 4 columns.

This is ok to do with flex? And do you know how to do?

I'm trying to do that like this: https://jsfiddle.net/18mzsqcx/1/, but it's not working.

Or it's better to just create a div for example .col4 with width equal to 25% and some margins and put this class .col4 in each item?

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

解决方案

By default, a flex container is set to flex-wrap: nowrap. This means that flex items will not be able to wrap to new lines.

So the first thing you should do is add flex-wrap: wrap to your container.

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

Then, define your flex items so that only four can fit on a row.

Instead of this:

.categories_item { flex-grow: 1; }

Try this:

.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>

这篇关于具有三（3）行和四（4）列的Flexbox网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！