使用Flexbox，有元素拉伸填充行之间的间隙 [英] Using Flexbox, have elements stretch to fill gap between rows

问题描述

我觉得有点愚蠢地问这个，但我已经用尽了我的Flexbox的知识，所以我希望也许有人可以进来，帮助我在这里。

I feel a little silly asking this, but I've sort of exhausted my knowledge of Flexboxes, so I'm hoping maybe someone else can come in and help me out here.

我的总体目标是让中间行中的两个项目伸展以填充标题和项目之间的空间，我已经搜索过，而且真的不知道它应该做什么。我分发了 CSS技巧指南中的代码，在底部，我做了一些改动。我目前的代码是（全屏模式下打开，使其更清晰）：

My overall goal is to just have the two items in the middle row stretch to fill the space between the header and the items, and I have searched around and honestly can't figure out what it is that I should do. I forked the code from the CSS Tricks Guide, the one at the very bottom, and I've made some alterations. The code I currently have is (open it in full screen mode to make it more clear):

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>

有可能在flexbox中实现这而不改变HTML ，或者我应该寻找另一种方式来实现这个目标？

Is it possible in flexbox to achieve this without changing the HTML, or should I just look for another way to accomplish this goal?

推荐答案

这个想法是将它们包装在一个容器上，并使用 flex-grow：1; 将使得容器填充页眉和页脚之间的空间。

The idea is to wrap them around a container and use flex-grow:1; on that container, this will make the container fill the space between the header and footer..

然后在 @media 此容器的 flex-direction 到 row 。这将使 .main 和 aside 在大屏幕上并排显示。

Then in the @media query, change the flex-direction of this container to row. This will make the .main and aside to come side by side on big screens.

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>

这篇关于使用Flexbox，有元素拉伸填充行之间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！