Question

我有多个数据列表，由HTML中的无序列表组成，我试图让它们显示在2列中。

我让它们显示为“列”但我无法让列显示我希望它们如何。

如果您查看下面的代码段，您可以看到列在2列中对齐，但我希望列是顺序的，因此左列中的A，B，C，D和D，E， F列在右栏中。

我使用过Flexbox并且一直在使用flex-direction，但无济于事。有小费吗？我究竟做错了什么？另外，这是一个Fiddle。

ul {
  display: flex;
  width: 500px;
  align-items: flex-start;
  flex-wrap: wrap;
}
ul li {
  width: 50%;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

我知道这是愚蠢而微不足道的但是我错过了什么？我也在使用Sass。

Answer 1

显示有问题：在IE浏览器中，我建议您使用此代码将适用于每个浏览器：

#include<iostream> 
using namespace std;
void printStuff(float)
{
    cout << "This is the print stuff function." << endl;
}

const float PI = 3.1415926f;

int main()
{
    void(*functionPointer)(float); // *functionPointer is a pointer
    functionPointer = printStuff;  // *functionPointer point to function printstuff
    cout << "functionPointer = " << functionPointer << "  " << "printStuff = " << printStuff << "  " << "&printStuff = " << &printStuff << endl;
    functionPointer(PI);

    return 0;
}

Answer 2

您没有在列中显示它们，而是以包装的行显示它们。

如果您需要在flexbox中使用列格式，则需要使用flex-direction:column并设置高度，以便Flexbox知道何时换行。

＆＃13;

ul {
  display: flex;
  width: 500px;
  flex-direction: column;
  flex-wrap: wrap;
  height: 5em;
}

＆＃13;

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

＆＃13;

Answer 3

如果不设置元素的高度，你可能不想这样做。

但是，您可以使用column-count设置多个列，并使每列包含大约相同数量的项目。

＆＃13;

ul {
  column-count: 2;
  column-gap: 35px;
}

＆＃13;

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

＆＃13;

Answer 4

您必须为此添加flex-direction: column;。但在这种情况下你还必须设置一个固定的高度。

＆＃13;

ul {
  display: flex;
  width: 500px;
  height: 80px;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}
ul li {
  width: 50%;
}

＆＃13;

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

＆＃13;

Answer 5

使用flex-direction: column;和ul上的高度。这样，柔性物品从上到下排列而不是从左到右（一排）。高度确保色谱柱包裹。如果您想使用flexbox来执行此操作，则需要执行此操作。

＆＃13;

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 75px;
}
ul li {
  width: 50%;
}

＆＃13;

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

＆＃13;

Answer 6

您可以使用grid和grid-auto-flow，因此您将自动展示位置设为column，请查看以下代码段：

ul {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(2, 125px);
  grid-auto-flow: column;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

我可以在CSS中更改这些列的顺序吗？

6 个答案: