当有多列

Question

我有li个显示为flex-direction: column的15个项目（它已应用于父级（ul））。然后，我div将ul包裹在justify-content: center的属性中。

问题是，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容器不会随其包装项一起展开。

可以通过在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