Question

我正在尝试在<ul>上使用flexbox，因此我可以将它们彼此对齐。当我在display:flex; flex-direction: row;上使用此<ul>时，它也会影响孩子（在这种情况下，所有<li>）

我尝试给<li> display:flex;以及flex-direction: column;，但这没有帮助。

我怎样才能实现我在这里想做的事情？查看我的jsFiddle进行演示。

Answer 1

如果您希望每个<ul>显示为彼此相邻的列，则可以将所有<ul>包含在div中，如下所示：

＆＃13;

div {
  display: flex;
}

ul {
  display: flex;
  flex-direction: column;
}

＆＃13;

<div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
  </ul>
  <ul>
    <li>Best 1</li>
    <li>Best 2</li>
    <li>Best 3</li>
  </ul>
</div>

＆＃13;

在ul上使用flexbox（彼此相邻）

1 个答案: