我正在尝试布局li's using flexbox。我将它们设置为列，其中 3li's在每一列中。问题是当我想要ul居中。
我以ul using 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>
如何使 ul 居中而不使其被切断？
这是一个非常好的问题，在找到实现这种行为的方法时遇到了一些困难。
我不相信你会找到一个纯粹的CSS解决方案，但是我们可以使用一些javascript.
基本上，我创建了一个附加到窗口调整大小事件的脚本，该脚本将执行以下操作：
- 检查包装元素内有多少个项目：
#wrapper
- 将元素数量除以 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
