将六列伸缩布局转换为三列

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

在flex-direction: row;中使用media-query来ul，在.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%; } }中使用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>

a = [1,2,3]
b = [4,5,6]
distance1 = euclidianDistance(a[0],b[0]) //first dimension
distance2 = euclidianDistance(a[1],b[1]) //second dimension
distance3 = euclidianDistance(a[0],b[0]) //third dimension

Answer 2

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

此外，您还必须从li标记中删除边框并将其放在内部div中，以免与33.33％的宽度值混淆。

A：删除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 3

如果您要保留弹性方向：列，则为您提供其他解决方案。

 .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：从List Item中选择高度并从中获取高度，此示例中我假设它是相同的，但是在实际项目中，每个List Item的ID都不相同。基本上，想法是包装第1列和第2列的externalHeight，然后将其求和并将该高度设置为父对象，因此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);