CSS实现：容器内ul居中对齐，li左对齐（多列flex布局）

要实现ul在容器中居中且所有li左对齐的多列布局，只需对原有样式做两处关键修改：

修改后的完整代码 #

.container {
  border: 2px solid green;
  /* 让容器成为flex容器，水平居中内部的ul */
  display: flex;
  justify-content: center;
}
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  /* 将li对齐方式从居中改为左对齐 */
  align-items: flex-start;
  /* 可选：给ul设置最小宽度，确保多列布局正常触发 */
  min-width: 300px;
}

<div class="container">
  <ul>
    <li>item 1</li>
    <li>item 22</li>
    <li>item 333</li>
    <li>item 4444</li>
    <li>item 55555</li>
    <li>item 666666</li>
    <li>item 7777777</li>
    <li>item 88888888</li>
    <li>item 999999999</li>
    <li>item 10</li>
  </ul>
</div>

关键修改说明 #

• 容器居中处理：给.container添加display: flex和justify-content: center，让内部的ul在容器水平方向上居中。
• li左对齐：将ul的align-items: center改为align-items: flex-start，这样所有列表项会沿着flex容器的左侧对齐，而不是居中。
• 可选的最小宽度：给ul设置min-width是为了确保当内容足够多时，flex-wrap能正常触发换行形成多列，避免所有内容挤在一列。

内容的提问来源于stack exchange，提问作者avocado