html – 使用Flexbox时,Top会被切断

概述我正在使用flexbox来布局div.当我在div中有很多li时(每个li的宽度为100％/ 3),顶部会被切掉.所以我在网上搜索,他们说要插入margin：auto到内部div.当我这样做时,我遇到了一个新问题.让我演示给你看： 有保证金：自动未应用： body, html { height:100%; margin: 0; padding:0;}#outerWrap 我正在使用flexBox来布局div.当我在div中有很多li时(每个li的宽度为100％/ 3),顶部会被切掉.所以我在网上搜索,他们说要插入margin：auto到内部div.当我这样做时,我遇到了一个新问题.让我演示给你看：

有保证金：自动未应用：

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 >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>        <li >21</li>        <li >22</li>        <li >23</li>        <li >24</li>    </ul></div>

JSFiddle

问题：flex-start有效,但顶部被切断.

保证金：自动应用：

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,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 >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>        <li >21</li>        <li >22</li>        <li >23</li>        <li >24</li>    </ul></div>

@L_404_4@

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

我的问题是,我怎么能有正当的内容：flex-start并且顶部没有被切断？

解决方法 自动边距推动d性项目.如果使用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 >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>    <li >21</li>    <li >22</li>    <li >23</li>    <li >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 >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>    <li >21</li>    <li >22</li>    <li >23</li>    <li >24</li>  </ul></div>

总结

以上是内存溢出为你收集整理的html – 使用Flexbox时,Top会被切断全部内容，希望文章能够帮你解决html – 使用Flexbox时,Top会被切断所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。