使用 Flexbox 时顶部被切断答案

【问题标题】：Top gets cut off when using Flexbox使用 Flexbox 时顶部被切断
【发布时间】：2021-02-22 11:31:18
【问题描述】：

我正在使用 flexbox 来布局 div's。当我在div 中有很多li's 时（每个li 的宽度为100%/3），顶部会被切断。所以我在网上搜索，他们说在内部div中插入margin: auto。当我这样做时，我遇到了一个新问题。让我告诉你：

使用margin: auto 未应用：

body, html {
    height:100%;
    margin: 0;
    padding:0;
}
#outerWrapper {
    background-color: aqua;
    height: 100%;
    display: flex;
    justify-content: flex-start; /* This is ignored */
    align-items: center;
    overflow: auto;
    
}

#innerWrapper {
   /* margin:auto; /* If this line is removed, then it does flex-start, but the top is cut off */
    width: 70%;
    list-style-type: none;
    padding: 0;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content:flex-start;
}


li {
    border: 1px solid black;
    box-sizing: border-box;
    flex-basis:calc(100%/3);
    height:100px;
}

<div id="outerWrapper">
    <ul id="innerWrapper">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
        <li class="flex-item">7</li>
        <li class="flex-item">8</li>
        <li class="flex-item">9</li>
        <li class="flex-item">10</li>
        <li class="flex-item">11</li>
        <li class="flex-item">12</li>
        <li class="flex-item">13</li>
        <li class="flex-item">14</li>
        <li class="flex-item">15</li>
        <li class="flex-item">16</li>
        <li class="flex-item">17</li>
        <li class="flex-item">18</li>
        <li class="flex-item">19</li>
        <li class="flex-item">20</li>
        <li class="flex-item">21</li>
        <li class="flex-item">22</li>
        <li class="flex-item">23</li>
        <li class="flex-item">24</li>
    </ul>
</div>

JSFiddle

问题： flex-start 有效，但顶部被切断。

应用margin: auto：

body, html {
    height:100%;
    margin: 0;
    padding:0;
}
#outerWrapper {
    background-color: aqua;
    height: 100%;
    display: flex;
    justify-content: flex-start; /* This is ignored */
    align-items: center;
    overflow: auto;
    
}

#innerWrapper {
   margin:auto; /* If this line is removed, then it does flex-start, but the top is cut off */
    width: 70%;
    list-style-type: none;
    padding: 0;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content:flex-start;
}


li {
    border: 1px solid black;
    box-sizing: border-box;
    flex-basis:calc(100%/3);
    height:100px;
}

<div id="outerWrapper">
    <ul id="innerWrapper">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
        <li class="flex-item">7</li>
        <li class="flex-item">8</li>
        <li class="flex-item">9</li>
        <li class="flex-item">10</li>
        <li class="flex-item">11</li>
        <li class="flex-item">12</li>
        <li class="flex-item">13</li>
        <li class="flex-item">14</li>
        <li class="flex-item">15</li>
        <li class="flex-item">16</li>
        <li class="flex-item">17</li>
        <li class="flex-item">18</li>
        <li class="flex-item">19</li>
        <li class="flex-item">20</li>
        <li class="flex-item">21</li>
        <li class="flex-item">22</li>
        <li class="flex-item">23</li>
        <li class="flex-item">24</li>
    </ul>
</div>

JSFiddle

问题： flex-start 不起作用，但顶部没有被切断。

我的问题是，我怎样才能拥有justify-content: flex-start 并且顶部不会被切断？

【问题讨论】：

这里是滚动限制的解释：stackoverflow.com/a/33455342/3597276

标签： html css flexbox

【解决方案1】：

自动边距推动弹性项目。如果你使用margin: auto，元素会从四面八方均匀地被推动，所以它会居中。

如果你想让它与顶部对齐，只设置margin-bottom: auto，让margin-top为0。

#innerWrapper {
  margin-top: 0;
  margin-bottom: auto;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#outerWrapper {
  background-color: aqua;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  /* This is ignored */
  align-items: center;
  overflow: auto;
}
#innerWrapper {
  margin-top: 0;
  margin-bottom: auto;
  width: 70%;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}
li {
  border: 1px solid black;
  box-sizing: border-box;
  flex-basis: calc(100%/3);
  height: 100px;
}

<div id="outerWrapper">
  <ul id="innerWrapper">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
    <li class="flex-item">8</li>
    <li class="flex-item">9</li>
    <li class="flex-item">10</li>
    <li class="flex-item">11</li>
    <li class="flex-item">12</li>
    <li class="flex-item">13</li>
    <li class="flex-item">14</li>
    <li class="flex-item">15</li>
    <li class="flex-item">16</li>
    <li class="flex-item">17</li>
    <li class="flex-item">18</li>
    <li class="flex-item">19</li>
    <li class="flex-item">20</li>
    <li class="flex-item">21</li>
    <li class="flex-item">22</li>
    <li class="flex-item">23</li>
    <li class="flex-item">24</li>
  </ul>
</div>

或者，忘记自动边距并删除产生剪切的代码：

#outerWrapper {
  align-items: center;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#outerWrapper {
  background-color: aqua;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  overflow: auto;
}
#innerWrapper {
  margin: 0;
  width: 70%;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}
li {
  border: 1px solid black;
  box-sizing: border-box;
  flex-basis: calc(100%/3);
  height: 100px;
}

<div id="outerWrapper">
  <ul id="innerWrapper">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
    <li class="flex-item">8</li>
    <li class="flex-item">9</li>
    <li class="flex-item">10</li>
    <li class="flex-item">11</li>
    <li class="flex-item">12</li>
    <li class="flex-item">13</li>
    <li class="flex-item">14</li>
    <li class="flex-item">15</li>
    <li class="flex-item">16</li>
    <li class="flex-item">17</li>
    <li class="flex-item">18</li>
    <li class="flex-item">19</li>
    <li class="flex-item">20</li>
    <li class="flex-item">21</li>
    <li class="flex-item">22</li>
    <li class="flex-item">23</li>
    <li class="flex-item">24</li>
  </ul>
</div>

【讨论】：

现在，如果我没有那么多的li's，align-items: center 就不起作用。让我给你看：jsfiddle.net/e0ctrmut/1
@Jessica 我以为你想将项目对齐到顶部？
我想要两个选项。（你说得对，我的问题中没有这么说。）
@Jessica 那我建议在#innerWrapper {margin-bottom:auto}和#innerWrapper {margin-top:auto;margin-bottom:auto}之间切换。
@Michael_B 这种情况是有问题的，因为带有width: auto 的多列弹性框不会增加其宽度以覆盖所有列，只会覆盖第一列。然后我不知道如何正确居中。

【解决方案2】：

使用

.flex-parent{
  display: flex;
  align-items: center;
  justify-content: center;
}


.flex-child{
  margin-top: auto;
  margin-bottom: auto;
}

【讨论】：

【解决方案3】：

我遇到了类似的问题，互联网搜索将我带到了这里。

上面的答案在我的情况下不起作用，但起作用的是用min-height:0; 规则将我的内容容器（被切断）包装在div 中。

注意：我使用了min-height，因为我使用的是列式布局——行将是min-width。在大多数情况下，同时使用两者可能不会有什么坏处。

html：

<div class="flex-fix">

    <div>This content was getting cut off...</div>

</div>

css：

.flex-fix {

    min-height: 0;
    min-width:  0;

}

我从 css-tricks.com 上的这篇文章中得到了线索： Flexbox and Truncated Text

希望这会有所帮助。

【讨论】：