使用flexbox对齐列

Question

我需要在网站的页脚中放置一长串链接，我想将它们列在列中。这段代码产生了我想要实现的外观......

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
    border: 1px solid blue;
    flex: 1 1 auto;
    padding: 8px;
    text-align: center;
}
ul li ul {
  display: inline-flex;
  flex-direction: column;
  width: auto;
}
ul li ul li {
  display: inline-block;
  text-align: left;
  width: auto;
}

<ul>
  <li>
    <ul>
      <li>Link One</li>
      <li>Link Two</li>
      <li>Link Three</li>
      <li>Link Four</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Link One</li>
      <li>Link Two</li>
      <li>Link Three</li>
      <li>Link Four</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Link Five</li>
      <li>Link Six</li>
      <li>Link Seven</li>
      <li>Link Eight</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Link Nine</li>
      <li>Link Ten</li>
      <li>Link Eleven</li>
      <li>Link Tweleve</li>
    </ul>
  </li>
</ul>

这很好用，但我不想使用多个列表。有什么办法可以发挥作用吗？

Answer 1

ul {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-around;
  height: 150px;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  border: 1px solid blue;
  padding: 8px;
  text-align: center;
}

<ul>
  <li>Link One</li>
  <li>Link Two</li>
  <li>Link Three</li>
  <li>Link Four</li>
  <li>Link One</li>
  <li>Link Two</li>
  <li>Link Three</li>
  <li>Link Four</li>
  <li>Link Five</li>
  <li>Link Six</li>
  <li>Link Seven</li>
  <li>Link Eight</li>
  <li>Link Nine</li>
  <li>Link Ten</li>
  <li>Link Eleven</li>
  <li>Link Tweleve</li>
</ul>

jsFiddle

Answer 2

列表在您的实现中固有地存在一些边距和填充问题，因此一些额外的CSS标记将有所帮助。您还需要在li上指定ul { display: flex; flex-direction: row; list-style-type:none; flex-wrap: wrap; height: 300px; border: 1px solid black; padding: 0; } li { margin: 0; border: 1px solid red; flex-grow: 1; }。

＆＃13;

＆＃13;

<ul>
  <li>1</li>  
  <li>2</li>  
  <li>3</li>  
  <li>4</li>
</ul>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;