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

I am trying to layout li's using flexbox. I have them set to column, with 3 li's in each column. The problem is when I want the ul centered.

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

I am centering the ul using align-content: center. When I do that, and have more li's than the page can show (overflowed), the li's at the beginning get cut off. (The ones on the left side get cut off, but the ones on the right side display fine.)

我使用align-content:center来定位ul。当我这样做,并且有比页面可以显示(溢出)更多的li时,开头的li会被切断。 (左侧的那些被切断,但右侧的那些显示正常。)

I will not have a specific number of li's, it could range from 4 to 50. So I therefore cannot remove align-content: center, because when I have a small amount of li's, (let's say 4), the results are not what I want.

我不会有特定数量的li,它可以在4到50之间。所以我因此无法删除align-content:center,因为当我有少量的li时,(比如4),结果不是什么我想要。

How can I center the ul without having it get cut off?

如何在没有被切断的情况下将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>

2 个解决方案

#1

How can I center the ul without having it get cut off?

如何在没有被切断的情况下将ul居中?

That was a really good question, had some trouble figuring a way to achieve this behavior.

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

I don't believe you will find a pure CSS solution, however we can do it using a bit of javascript.

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

Basically i´ve created a script attached to the window resize event that will do the following:

基本上我已经创建了一个附加到window resize事件的脚本,它将执行以下操作:

check how many items we have inside our wrapper element: #wrapper

检查我们的包装元素中有多少项:#wrapper

divide the number of elements by 3 (since we have 3 elements in each column) to discover how many columns will be needed to display the items

将元素数除以3(因为每列中有3个元素),以发现显示项目需要多少列

assign a width to the wrapper element using the following formula: number of columns * width of each item (in our case that's 200px)

使用以下公式为包装器元素指定宽度:列数*每个项的宽度(在我们的示例中为200px)

Doing that we force the overflow in the parent element, and the scrollbar will have a normal behavior, showing every element.

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

The full code is available in jsfiddle.

完整的代码在jsfiddle中可用。

Check the following example:

请检查以下示例:

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>

#2

remove align-content and use margin-left:20%; margin-right:auto;

删除align-content并使用margin-left:20%;保证金右:自动;

#1