html - 将六列 flex 布局转换为三列

Question

我有一排有六个列表项。在断点 992px 上，我希望将这个六列布局转换为三列布局。

我可以简单地为单列执行 flex-direction: column，但不确定我将如何处理三列布局。

当前方法:

.list-items-ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  border: 1px solid #000;
}

.list_item-container {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0px 20px;
}

@media (max-width: 992px) {
  .list-items-ul {
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

<ul class="list-items-ul">
  <li>
    <div class="list_item-container">
      <span>Col 1</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 2</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 3</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 4</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 5</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 6</span>
    </div>
  </li>
</ul>

Answer 1

您实际上根本不想使用 column。只需告诉 ul 使用 flex-wrap:wrap; wrap 并使 li 标签的宽度为增加所需可用列的百分比。例如，如果您想要 3 列，则在 li 上使用 33.33% 宽度；如果您想要 2 列，则使用 50%。

此外，您必须从 li 标签中删除边框并将其放在内部 div 上，这样它就不会与 33.33% 的宽度值混淆。

答:移除 li 标签的 css。

B: 添加:

.list_item-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  padding: 0px 20px;
}

@media (max-width: 992px) {
  .list-items-ul {
    flex-wrap: wrap;
  }
  .list-items-ul li { width: 33.33%;}
}

**完整示例:**

.list-items-ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

.list_item-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  padding: 0px 20px;
}

@media (max-width: 992px) {
  .list-items-ul {
    flex-wrap: wrap;
  }
  .list-items-ul li { width: 33.33%;}
}

<ul class="list-items-ul">
  <li>
    <div class="list_item-container">
      <span>Col 1</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 2</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 3</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 4</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 5</span>
    </div>
  </li>
  <li>
    <div class="list_item-container">
      <span>Col 6</span>
    </div>
  </li>
</ul>