我有一个flexbox布局,如下所示:
html {
height:100%;
width:100%;
}
body {
display:flex;
flex-direction:column;
align-items:stretch;
height:100%;
width:100%;
margin:0;
background-color:grey;
}
header {
background-color:green;
height:3em;
flex:0 0 auto;
}
main {
display:flex;
flex:1 1 auto;
overflow:hidden;
background-color:yellow;
}
nav {
flex:0 0 100px;
overflow:auto;
background-color:grey;
}
#wrapper {
flex: 1 1 auto;
display: flex;
align-items: stretch;
flex-direction: column;
background-color:red;
}
#content {
flex: 1 1 auto;
overflow:auto;
background-color:white;
}
footer {
height: 1em;
flex: 0 0 auto;
background-color:blue;
}
<header>header</header>
<main>
<nav></nav>
<div id="wrapper">
<div id="content">
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>
</div>
<footer></footer>
</div>
</main>
滚动条按预期工作,我看到从0到29。
但是如果我只有29行,如何使该行在内容中居中对齐?
我尝试在display:flex
上设置align-items:center
和content
,该方法适用于单行,但是如果内容太长,则会使内容的顶部消失。
所需的一行结果:
答案 0 :(得分:0)
由于<br>,
,您无法对齐项目。您可以使用span
这样尝试
到水平方向
html {
height: 100%;
width: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100%;
width: 100%;
margin: 0;
background-color: grey;
}
header {
background-color: green;
height: 3em;
flex: 0 0 auto;
}
main {
display: flex;
flex: 1 1 auto;
overflow: hidden;
background-color: yellow;
}
nav {
flex: 0 0 100px;
overflow: auto;
background-color: grey;
}
#wrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background-color: red;
}
#content {
align-items: center;
flex: 1 1 auto;
overflow: auto;
background-color: white;
display: flex;
}
span {
padding: 5px;
}
footer {
height: 1em;
flex: 0 0 auto;
background-color: blue;
}
<header>header</header>
<main>
<nav></nav>
<div id="wrapper">
<div id="content">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
</div>
<footer></footer>
</div>
</main>
对于垂直尝试,希望对您有所帮助。
html {
height: 100%;
width: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100%;
width: 100%;
margin: 0;
background-color: grey;
}
header {
background-color: green;
height: 3em;
flex: 0 0 auto;
}
main {
display: flex;
flex: 1 1 auto;
overflow: hidden;
background-color: yellow;
}
nav {
flex: 0 0 100px;
overflow: auto;
background-color: grey;
}
#wrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background-color: red;
}
#content {
flex: 1 1 auto;
overflow: auto;
background-color: white;
display: flex;
flex-direction: column;
}
span {
padding: 5px;
}
footer {
height: 1em;
flex: 0 0 auto;
background-color: blue;
}
<header>header</header>
<main>
<nav></nav>
<div id="wrapper">
<div id="content">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
</div>
<footer></footer>
</div>
</main>
如果要垂直居中对齐,请添加此align-items: center;
答案 1 :(得分:0)
参考您的图像。我认为这就是您要寻找的。 <br>
对您不起作用,因为您需要为每个元素提供height
,因此我已将其替换为div
,其中可能包含某些forms
或任何其他数据。
html {
height:100%;
width:100%;
}
body {
display:flex;
flex-direction:column;
align-items:stretch;
height:100%;
width:100%;
margin:0;
background-color:grey;
}
header {
background-color:green;
height:3em;
flex:0 0 auto;
}
main {
display:flex;
flex:1 1 auto;
overflow:hidden;
background-color:yellow;
}
nav {
flex:0 0 100px;
overflow:auto;
background-color:grey;
}
#wrapper {
flex: 1 1 auto;
display: flex;
align-items: stretch;
flex-direction: column;
background-color:red;
}
#content {
flex: 1 1 auto;
overflow:auto;
background-color:white;
}
#content > div{ border:1px solid #ccc; height:100vh; display:flex; align-items: center; }
footer {
height: 1em;
flex: 0 0 auto;
background-color:blue;
}
<header>header</header>
<main>
<nav></nav>
<div id="wrapper">
<div id="content">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
<footer></footer>
</div>
</main>