html - Flex 容器计算一列，当有多列时

Question

我有一个包含 15 个元素的 li，显示为 flex-direction: column(它应用于父级 (ul))。然后我有一个 div 用 justify-content: center 属性包装 ul。

问题是，div 计算 ul 就好像它只是一列，即使我有多个列。所以宽度是 ul 200px 而它应该是 800px。因此，当我将 justify-content:center(或 flex-end)的属性添加到 div 时，它使 居中ul 就好像它只有 200px，所以它没有正确居中。

我该如何解决？

JSFiddle

div {
  background-color: aqua;
  height: 700px;
  display: flex;
  justify-content: center;
}
ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
li {
  outline: 1px solid;
  background-color: greenYellow;
  list-style-type: none;
  width: 200px;
  height: 150px;
}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
  </ul>
</div>

Answer 1

您遇到的障碍是 flex 布局的根本缺陷:

A flex container in column-direction will not expand along with its wrapping items.

这个问题可以通过在 ul 周围加上边框来说明:

Revised Fiddle

您会注意到容器保持固定宽度，能够容纳一列。包装列只会溢出它。此问题已记录在此处: When flexbox items wrap in column mode, container does not grow its width

作为解决方案，您可以:

• 切换到 flex-direction: row，包含包装项没有问题 ( demo )
• 使用 display: flex 以外的东西，比如 display: inline-block
• 使用 Javascript/jQuery。这是一种可能的修复方法:https://stackoverflow.com/a/26231447/3597276