当水平对中时，李的切断 [英] When centering horizontally, li's get cut off

问题描述

我试图使用 flexbox 布局 li 。我把它们设置为列，每列3 li 。问题是我想要 ul 居中。

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.

我以 / code>使用 align-content：center 。当我这样做，并且有更多的 li的比页面可以显示（溢出）， li的隔断。 （左边的那些会被切断，但是右边的显示很好。）

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.)

我不会有一个特定的数字<$ <$ c> li's ，它的范围从4到50。因此，我不能删除 align-content：center 当我有少量的 li's （比方说4），结果不是我想要的结果。

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.

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?

这是一个很好的问题，有一些麻烦，想办法实现这种行为。

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

我不相信你会发现一个纯粹的 CSS 解决方案，但我们可以使用 javascript 。

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

已经创建了一个附加到窗口resize事件的脚本，它将执行以下操作：

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

1. 检查我们的wrapper元素中有多少项： #wrapper


2. 将元素数量除以3（因为每列中有3个元素），以发现多少列需要显示项


3. 使用以下公式为wrapper元素指定宽度：列数*每个项的宽度（在我们的示例中为 200px ）



我们在父元素中强制溢出，滚动条会有正常的行为每个元素。

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

完整代码可在 jsfiddle 。

The full code is available in 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>

这篇关于当水平对中时，李的切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！