当水平居中时,li会被切断

Question

我正在尝试布局li's使用flexbox.我把它们设置为列,li's每列3个.问题是我想要ul居中.

我正在ul使用中心align-content: center.当我这样做,并且有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

\n

如何使 ul 居中而不使其被切断？

\n

\n\n

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

\n\n

我不相信你会找到一个纯粹的CSS解决方案，但是我们可以使用一些javascript.

\n\n

基本上 i\xc2\xb4ve 创建了一个附加到窗口调整大小事件的脚本，该脚本将执行以下操作：

\n\n

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

\n\n

这样做我们会强制父元素溢出，并且滚动条将具有正常行为，显示每个元素。

\n\n

完整的代码可在 中找到jsfiddle。

\n\n

检查以下示例：

\n\n

\r\n

\r\n

function onResize() {\r\n\r\n  var wrapper = document.querySelector(\'#wrapper\');\r\n\r\n  var items = wrapper.querySelectorAll(\'li\');\r\n\r\n  var columns = Math.ceil(items.length / 3);\r\n\r\n  var width = 200 * columns;\r\n\r\n  wrapper.style.width = width > window.innerWidth ? width + \'px\' : \'100%\';\r\n\r\n}\r\n\r\nonResize();\r\n\r\nwindow.addEventListener(\'resize\', onResize);

\r\n

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

\r\n

<div id="wrapper">\r\n  <ul>\r\n    <li>1</li>\r\n    <li>2</li>\r\n    <li>3</li>\r\n    <li>4</li>\r\n    <li>5</li>\r\n    <li>6</li>\r\n    <li>7</li>\r\n    <li>8</li>\r\n    <li>9</li>\r\n  </ul>\r\n</div>

\r\n

\r\n

\r\n

\n