使用Flexbox时，Top会被切断

时间：2015-11-02 20:00:51

标签： html css flexbox

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

应用margin: auto 而非：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JSFiddle

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

应用margin: auto：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JSFiddle

问题： flex-start不起作用，但top不会被切断。

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

3 个答案:

答案 0 :(得分：6)

自动边距推动弹性项目。如果您使用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>

答案 1 :(得分：1)

使用

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


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

答案 2 :(得分：0)

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

在我的情况下，上述答案无效，但是有效的方法是将我的内容容器（已被切断）包装在div样式的min-height:0;中。

注意：我使用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

希望这会有所帮助。

相关问题
最新问题