Flex将相同宽度的元素移至下一行

Question

我正在尝试通过CSS3 flex实现以下目标：

所有块的宽度为33％，每行3个。我没有div的行，只是块，不适合的块应该移到下面。

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

我的CSS：

.wrap {
  display: flex;
  flex: 1;
}

.block {
  display: flex;
  flex-direction: column;
  flex: 1 0 33%;
  width: 33%;
}

第三步之后的任何块都移动到底部，这是我想要的，但是它以100％的比例拉伸而不是保留其30％的宽度。如果第二行有两个街区，则每个街区会拉伸50％...

我怎样才能使它们全部保持33％？

注意：html是动态的，必须保持不变。我不能每隔div包裹每3个块。

Answer 1

按如下所示使用Flex-basis属性

.wrap {
  display: flex;
  flex-flow: wrap;
}
.wrap .block{
  flex-basis: 33.33%
}

<div class="wrap">
      <div class="block">text</div>
      <div class="block">text</div>
      <div class="block">text</div>
      <div class="block">text</div>
      <div class="block">text</div>
 </div>

Answer 2

您需要更改一些内容，而其他一些不必要的内容，但是由于我不知道完整的模板是什么样子，因此将其标记在注释中。

.wrap {
  display: flex;
  flex: 1; /* unnecesary */
  flex-wrap: wrap;

  /* the following styles are just so the result is visible */
  background-color: blue;
}

.block {
  display: flex; /* unnecesary, only the container needs to be flex */
                 /* unless this is another flex container */
  flex-direction: column; /* also unnecesary unless it's for purposes not shown in the example */
  width: 33.3333%;

  /* the following styles are just so the result is visible */
  height: 20px;
  background-color: red;
}

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>