我正在尝试使用flexBox布局li.我把它们设置为列,每列有3个li.问题是当我想要将ul置于中心位置
我使用align-content：center居中使用ul.当我这样做,并且比页面可以显示(溢出)更多的李,李的开始被切断. (左侧的那个被切断,右边的那个显示正常.)
我不会有特定数量的李,可能在4到50之间.所以我不能删除对齐内容：中心,因为当我有少量的李,(让我们说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>
解决方法
How can I center the ul without having it get cut off?
这是一个非常好的问题,有一些困难找到一种方式来实现这一行为.
我不相信你会发现一个纯粹的CSS解决方案,但是我们可以使用一些javascript.
基本上我创建了一个附加到窗口大小事件的脚本,它将执行以下操作：
检查我们的包装元素中有多少项目：#wrapper
>将元素数量除以3(因为我们在每列中有3个元素)来发现显示项目需要多少列
>使用以下公式为包装器元素分配一个宽度：列数*每个项目的宽度(在我们的例子中是200px)
这样做我们强制在父元素中的溢出,并且滚动条将具有正常的行为,显示每个元素.
检查以下示例：
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>
