将六列 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。只需用flex-wrap:wrap; 将ul 告诉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>

Answer 2

在media-query中使用flex-direction: row;到ul和flex:0 1 45%;到li

.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 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }
  li{
   flex:0 1 45%;
  }
}

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

如果您想保留 flex-direction: 列，可以为您提供其他解决方案。

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

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;
  }

  li{
    width: calc(100%/3);
    height: auto;
  }
}

jquery：从列表项中选择并获取高度，这个例子我只是假设它是相同的，但是在实际项目中，每个列表项都会有不同的id。基本上，想法是从 Col 1 和 Col 2 包装 outerHeight，然后对其求和并将该高度设置为父级，因此 flex-wrap: wrap 将起作用。每次达到该高度时，它将移动到下一行。并且会在内容变化时自动调整。

const container = $('.list-items-ul');
const heightListItem = $('li').outerHeight(); //have to grap the height from each item and sum it
const heightContainer = container.outerHeight(heightListItem*2);