Используя Flexbox, элементы растягиваются, чтобы заполнить промежуток между строками

Я чувствую себя немного глупо, спрашивая об этом, но я немного истощил свои знания о Flexboxes, поэтому я надеюсь, что кто-то может прийти и помочь мне здесь.

Моя общая цель состоит в том, чтобы просто иметь два элемента в растяжении средней строки, чтобы заполнить пробел между заголовком и элементами, и я искал вокруг и честно не могу понять, что я должен делать. Я разветкил код из Руководство по трюкам CSS, тот, который находится внизу, и я внес некоторые изменения. Код, который у меня сейчас есть (откройте его в полноэкранном режиме, чтобы сделать его более понятным):

body,
html {
  height: 100%;
}
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  height: 100%;
  font-weight: bold;
  text-align: center;
}
.wrapper > * {
  padding: 10px;
  flex: 1 1 100%;
}
.header {
  background: tomato;
  height: 50px;
  flex: 1 1 100%;
}
.footer {
  background: lightgreen;
  height: 50px;
}
.main {
  text-align: left;
  align-self: stretch;
  background: deepskyblue;
}
.aside-1 {
  background: gold;
}
.aside-2 {
  background: hotpink;
}
@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .aside-1 {
    order: 1;
  }
  .main {
    order: 2;
  }
  .aside-2 {
    order: 3;
  }
  .footer {
    order: 4;
  }
}
body {
  padding: 2em;
}
<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>

  <footer class="footer">Footer</footer>
</div>

ОТВЕТЫ

Ответ 1

Пока люди говорят вам, как решить проблему, они не сообщают вам, почему у вас нет ожидаемого результата. Я думаю, это отчасти потому, что большинство из них упустило настоящий вопрос. Что я нашел действительно интересным.

Позвольте мне сначала сделать некоторые вещи:

Гибкое направление:. Для практических целей это означает направление, в котором отображаются элементы. Однако это неточно.

Теперь скажем, что если для направления установлено значение row, это означает, что каждый элемент должен иметь высоту контейнера, и они должны быть помещены рядом друг с другом. Другими словами, контейнер должен рассматриваться как строка, а элемент - это столбцы.

.c{
  display: flex;
  width: 400px;
  height:100px;
}
.c1{
  flex-grow: 1;
  background:gold;

}
.c2{
  flex-grow: 1;
  background:red;
}
<div class="c">
    <div class="c1"></div>
    <div class="c2"></div>
</div>

Ответ 2

Идея состоит в том, чтобы обернуть их вокруг контейнера и использовать flex-grow:1; в этом контейнере, это заставит контейнер заполнить пробел между верхним и нижним колонтитулами.

Затем в запросе @media измените flex-direction этого контейнера на row. Это приведет к тому, что .main и aside появятся рядом на больших экранах.

body,
html {
  height: 100%;
}
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
  flex-direction:column;
  height: 100%;
  font-weight: bold;
  text-align: center;
}
.wrapper > * {
  padding: 10px;
}
.header {
  background: tomato;
  height: 50px;
  flex-shrink:0;
}
.footer {
  background: lightgreen;
  height: 50px;
  flex-shrink:0;
}
.main {
  text-align: left;
  //align-self: stretch;
  background: deepskyblue;
  padding:10px;
}
.main p{
  margin:0;
  padding:0;
}
.aside-1 {
  background: gold;
}
.aside-2 {
  background: hotpink;
}
.container{
  width:100%;
  margin:0;
  padding:0;
  flex-grow:1;
  flex-shrink:0;
}
@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .container{
    display:flex;
    flex-direction:row;
  }
  .main {
    flex: 3 0px;
    flex-grow:1;
    flex-shrink:0;
  }
  .aside-1 {
    order: 1;
    flex-grow:1;
    flex-shrink:0;
  }
  .main {
    order: 2;
  }
  .aside-2 {
    order: 3;
  }
  .footer {
    order: 4;
  }
}
body {
  padding: 2em;
}
<div class="wrapper">
  <header class="header">Header</header>
  <div class="container">
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>
    </div>
  <footer class="footer">Footer</footer>
</div>

Ответ 3

Вы не можете заполнить оставшееся пространство в поперечном направлении при использовании обертки flexbox - я думаю, для этого вам нужен столбец flexbox.

Но вы можете сделать это как быстрое решение:

  • Добавьте align-content: center в flexbox (для сброса значения по умолчанию stretch)

  • Отрегулируйте высоту с помощью calc (удалили отступ body и поле для иллюстрации)

Смотрите демонстрационную версию ниже:

body,
html {
  height: 100%;
}
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  height: 100%;
  font-weight: bold;
  text-align: center;
  align-content: center; /* ADDED THIS */
}
.wrapper > * {
  padding: 10px;
  flex: 1 1 100%;
}
.header {
  background: tomato;
  height: 50px;
  flex: 1 1 100%;
}
.footer {
  background: lightgreen;
  height: 50px;
}
.main {
  text-align: left;
  align-self: stretch;
  background: deepskyblue;
  height: calc(50vh - 90px); /* ADDED THIS */
}
.aside-1 {
  background: gold;
  height: calc(50vh - 90px); /* ADDED THIS */
}
.aside-2 {
  background: hotpink;
}
@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .aside-1 {
    order: 1;
    height: calc(100vh - 160px); /* ADDED THIS */
  }
  .main {
    order: 2;
    height: calc(100vh - 160px); /* ADDED THIS */
  }
  .aside-2 {
    order: 3;
  }
  .footer {
    order: 4;
  }
}
body {
  /* padding: 2em;*/
  margin: 0; /* ADDED THIS */
}
<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>

  <footer class="footer">Footer</footer>
</div>

Ответ 4

Прочитав все остальные ответы, я решил опубликовать свои собственные.

Возможно, я пропустил что-то уже опубликованное или неправильно понял вопрос, хотя для меня это должно быть самым простым решением без изменения разметки.

Если это ответит на ваш вопрос, я добавлю короткое объяснение, почему/как оно работает.

html, body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  height: 50px;
}
.footer {
  height: 50px;
}
.main {
  text-align: left;
  flex: 1;
}

@media (min-width: 600px) {
  .aside {
    flex: 1;
  }
}
@media (min-width: 800px) {
  .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .header {
    flex-basis: 100%;
    order: -1;
  }
  .main {
    flex: 2;
  }
  .aside-1 {
    order: -1;
    height: calc(100% - 100px);
  }
  .footer {
    flex-basis: 100%;
  }
}



/*  for styling  */
.wrapper {
  font-weight: bold;
  text-align: center;
}
.wrapper > * {
  padding: 10px;
  box-sizing: border-box;
}
.header {
  background: tomato;
}
.footer {
  background: lightgreen;
}
.main {
  background: deepskyblue;
}
.aside-1 {
  background: gold;
}
<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>

  <footer class="footer">Footer</footer>
</div>