Question

我有这样的示例代码：

.items {
  display: flex;
  flex-flow: wrap;
  width: 400px;
  height: 200px;
  background: yellow;
}

.item {
  flex: 50%;
}

<div class="items">
  <div class="item">
    <span>item 1</span>
  </div>
  <div class="item">
    <span>item 2</span>
  </div>
  <div class="item">
    <span>item 3</span>
  </div>
  <div class="item">
    <span>item 4</span>
  </div>
  <div class="item">
    <span>item 5</span>
  </div>
  <div class="item">
    <span>item 6</span>
  </div>
  <div class="item">
    <span>item 7</span>
  </div>
  <div class="item">
    <span>item 8</span>
  </div>
  <div class="item">
    <span>item 9</span>
  </div>
  <div class="item">
    <span>item 10</span>
  </div>
  <div class="item">
    <span>item 11</span>
  </div>
  <div class="item">
    <span>item 12</span>
  </div>
  <div class="item">
    <span>item 13</span>
  </div>
  <div class="item">
    <span>item 14</span>
  </div>
</div>

我的商品对齐有误，所以item 2在item 1的右边，我需要对其进行一些更改...

应该是这样的：

item 1 | item 4
item 2 | item 5
item 3 | item 6

每个下一个项目都应在上一个项目下，并且必须包装到各列中。普通的CSS和HTML是否可以实现？

JsFiddle here

Answer 1

您的代码有所更改，

将flex-direction: column;添加到.items，并将flex: 0 1;添加到.item

.items {
  display: flex;
  flex-flow: wrap;
  width: 400px;
  height: 200px;
  background: yellow;
  flex-direction: column;
}

.item {
  flex: 0 1;
}

<div class="items">
  <div class="item">
    <span>item 1</span>
  </div>
  <div class="item">
    <span>item 2</span>
  </div>
  <div class="item">
    <span>item 3</span>
  </div>
  <div class="item">
    <span>item 4</span>
  </div>
  <div class="item">
    <span>item 5</span>
  </div>
  <div class="item">
    <span>item 6</span>
  </div>
  <div class="item">
    <span>item 7</span>
  </div>
  <div class="item">
    <span>item 8</span>
  </div>
  <div class="item">
    <span>item 9</span>
  </div>
  <div class="item">
    <span>item 10</span>
  </div>
  <div class="item">
    <span>item 11</span>
  </div>
  <div class="item">
    <span>item 12</span>
  </div>
  <div class="item">
    <span>item 13</span>
  </div>
  <div class="item">
    <span>item 14</span>
  </div>

</div>

Answer 2

您可以添加flex-direction：column，以便下一个元素位于元素.4的下方，它将位于1旁边。这是一篇不错的文章，您可以阅读https://gedd.ski/post/flex-wrap/

Answer 3

.parentClass { display: flex; flex-wrap: wrap; flex-direction: column; border: 1px solid #678596; max-width: 600px; height: 300px;}
.parentClass > div {flex: 1 1 80px; background-color:#678596; margin: 5px; text-align: center; color: #fff;}

<div class="parentClass">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
      <div>Six</div>
      <div>Seven</div>
      <div>Eight</div>
      <div>Nine</div>
      <div>Ten</div>
  </div>

CSS flex对齐报纸上的列

3 个答案: