Центральное вертикальное выравнивание внутри flexbox - PullRequest
Новая
       37

Центральное вертикальное выравнивание внутри flexbox

0 голосов
/ 19 октября 2018

У меня есть макет 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, которая работает для одной строки, но заставляет верхнюю часть содержимого исчезать в случае длинногоcontent.

Желаемый результат для одной строки: Result for single line

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

со ссылкой на ваше изображение.Я думаю, это то, что вы ищете.<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>
0 голосов
/ 19 октября 2018

Из-за <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;

...