使用Flexbox时,Top会被切断

Question

我正在使用flexbox进行布局div's.当我有很多li's内部div(每个li宽度为100%/ 3)时顶部被切断.所以我在网上搜索,他们说要插入margin: auto内部div.当我这样做时,我遇到了一个新问题.让我演示给你看:

随着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并且顶部不被切断？

Answer 1

使用

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


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

Answer 2

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