水平居中时，li会被切断

Question

我正在尝试使用flexbox 布局li's。我将它们设置为列，每列中有 3 个li's。问题是当我希望 ul 居中时。

我使用align-content: center 将ul 居中。当我这样做时，li's 比页面可以显示的多（溢出），开头的 li's 会被切断。 （左边的被截断了，右边的显示正常。）

我不会有li's的具体数量，范围可以从4到50。因此我不能删除align-content: center，因为当我有少量li's时,（比如说4），结果不是我想要的。

我怎样才能使ul 居中而不被切断？

JSFiddle

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    flex-direction: column;
    width: 100%;
    height: 70%;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
}
li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    list-style-type: none;
    width: 200px;
}

<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>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
    </ul>
</div>

Answer 1

如何在不被切断的情况下将 ul 居中？

这是一个非常好的问题，在想办法实现这种行为时遇到了一些麻烦。

我不相信你会找到一个纯粹的CSS 解决方案，但是我们可以使用一点javascript 来做到这一点。

基本上我已经创建了一个附加到窗口调整大小事件的脚本，它将执行以下操作：

1. 检查我们的包装元素中有多少项目：#wrapper
2. 将元素的数量除以 3（因为我们在每列中有 3 个元素）来确定显示项目需要多少列
3. 使用以下公式为包装元素分配宽度：列数 * 每个项目的宽度（在我们的示例中为 200px）

这样做我们在父元素中强制溢出，滚动条将有一个正常的行为，显示每个元素。

完整代码见jsfiddle。

检查以下示例：

function onResize() {

  var wrapper = document.querySelector('#wrapper');

  var items = wrapper.querySelectorAll('li');

  var columns = Math.ceil(items.length / 3);

  var width = 200 * columns;

  wrapper.style.width = width > window.innerWidth ? width + 'px' : '100%';

}

onResize();

window.addEventListener('resize', onResize);

html,
body {
  height: 100%;
  text-align: center;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#wrapper {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: aqua;
}
ul {
  height: 75%;
  list-style: none;
  display: flex;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}
li {
  flex-basis: calc(100% / 3 - 2px);
  color: firebrick;
  border: 1px solid firebrick;
  background-color: greenYellow;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="wrapper">
  <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>
  </ul>
</div>

Answer 2

删除对齐内容并使用margin-left:20%; margin-right:auto;

Answer 3

safe 关键字可居中并保留在屏幕上。目前仅支持 Firefox：

ul {
  align-content: safe center;
}

Answer 4

我最终做的是给父元素一个集合min-width，它涵盖了所有内容。