Question

我觉得有点傻问这个，但是我对Flexboxes的了解已经筋疲力尽了，所以我希望别人可以进来帮助我。

我的总体目标是让中间一行中的两个项目伸展以填充标题和项目之间的空间，我已经四处寻找并且老实说无法弄清楚我应该做什么。我从CSS Tricks Guide分叉代码，最底层的代码，我做了一些修改。我目前拥有的代码是（以全屏模式打开它以使其更清晰）：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

是否可以在flexbox中实现而不更改HTML ，或者我应该寻找另一种方法来实现这一目标？

Answer 1

虽然人们告诉你如何解决问题，但他们并没有告诉你为什么你没有得到预期的结果。我认为这部分是因为他们中的大多数都错过了实际的问题。我觉得这很有趣。

首先让我先解决一些问题：

弹性方向：：出于实际目的，它表示项目的显示方向。但是它不准确。

现在让我们说如果方向设置为行，则意味着每个项目必须具有容器的高度，并且它们应该彼此相邻。换句话说，容器必须被视为一行，而项目是列。

＆＃13;

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

＆＃13;

<div class="c">
    <div class="c1"></div>
    <div class="c2"></div>
</div>

＆＃13;

我没有指定高度，这些项目填充了行的高度，并且像列一样堆叠在一起。

当您指定高度时，该项目将采用您定义的高度但不会更改行的高度：

＆＃13;

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

＆＃13;

<div class="c">
    <div class="c1"></div>
    <div class="c2"></div>
</div>

＆＃13;

红色立方体仍然会产生垂直空间，因为行的高度没有变化。

flex grow ：可用空间的数量分配给不同的项目。

＆＃13;

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

＆＃13;

    <div class="c">
        <div class="c1">AAAAAAAAAAAAA</div>
        <div class="c2"></div>
    </div>

＆＃13;

尽管具有相同的弹性增长值，但这两个项目的大小不同，这是因为自由空间分布在它们之间，但黄色矩形开始时更大。

首先让我们使用 flex-wrap：wrap ：

＆＃13;

.c{
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  width: 400px;
  height:100px;
}
.c1{
  width:200px;
  background:gold;

}
.c2{
  width:200px;
  background:red;
}

.c3{
  width:100px;
  background:orange;

}
.c4{
  width:300px;
  background:green;
}

＆＃13;

<div class="c">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</div>

＆＃13;

正如我们所看到的，当我们超出可用宽度的数量时，项目开始，有效地创建另一行。

现在解决你的问题：

如果我们采用上面的例子并设置第一项的高度怎么办？我们来看看：

＆＃13;

    .c{
      display: flex;
      flex-wrap: wrap;
      border: 1px solid black;
      width: 400px;
      height:100px;
    }
    .c1{
      width:200px;
      height: 30px;
      background:gold;

    }
    .c2{
      width:200px;
      background:red;
    }

    .c3{
      width:200px;
      background:orange;

    }
    .c4{
      width:200px;
      background:green;
    }

＆＃13;

<div class="c">
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
  <div class="c4"></div>
</div>

＆＃13;

就像在您的代码段中一样。

让我们看另一个例子：

＆＃13;

        .c{
          display: flex;
          flex-wrap: wrap;
          border: 1px solid black;
          width: 600px;
          height:100px;
        }
        .c1{
          width:400px;
          height: 35px;
          background:gold;

        }
        .c2{
          width:200px;
          background:red;
        }

        .c3{
          width:200px;
          background:orange;

        }
        .c4{
          width:200px;
          background:green;
        }
        .c5{
          width:200px;
          background:purple;
        }

＆＃13;

    <div class="c">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <div class="c4"></div>
      <div class="c5"></div>
    </div>

＆＃13;

放置400px X 35px的黄色立方体并跨越2列，然后放置200px的红色立方体并跨越1列。
此时所有矩形的高度均为0，但第一个矩形的高度为35px。
剩余的垂直空间在行之间划分，以产生整个垂直空间。因此剩余的垂直空间是100-35 = 65px。分为2行= 32.5。第一行得到35 + 32.5，第二行得到32.5px高度。

另一个让事情更清晰的例子：

＆＃13;

    .c, .d{
              display: flex;
              flex-wrap: wrap;
              border: 1px solid black;
              width: 600px;
              height:100px;
            }

            .c1{
              flex-shrink: 0;
              width:400px;
              height: 0px;
              background:gold;

            }
            .c2{
              width:200px;
              background:red;
            }

            .c3{
              width:200px;
              background:orange;

            }
            .c4{
              width:200px;
              background:green;
            }
            .c5{
              width:200px;
              background:purple;
            }


            .d1{
              width:400px;
              height: 50px;
              background:gold;

            }
            .d2{
              width:200px;
              background:red;
            }

            .d3{
              width:200px;
              background:orange;

            }
            .d4{
              width:200px;
              background:green;
            }
            .d5{
              width:200px;
              background:purple;
            }

＆＃13;

First item has 0px height, the vertical space remaining (100px) is divided between the 2 rows. Both row have 50px height
        <div class="c">
          <div class="c1"></div>
          <div class="c2"></div>
          <div class="c3"></div>
          <div class="c4"></div>
          <div class="c5"></div>
        </div>

First item has 35px height, the vertical space remaining (65px) is divided between the 2 rows.
        <div class="d">
          <div class="d1"></div>
          <div class="d2"></div>
          <div class="d3"></div>
          <div class="d4"></div>
          <div class="d5"></div>
        </div>

＆＃13;

要解决此问题，您可以使用calc()计算其他行高度，就像其他人建议的那样。原因是没有更多的自由垂直空间可供共享。

＆＃13;

            .c{
              display: flex;
              flex-wrap: wrap;
              border: 1px solid black;
              width: 600px;
              height:100px;
            }
            .c1{
              width:400px;
              height: 35px;
              background:gold;

            }
            .c2{
              width:200px;
              background:red;
            }

            .c3{
              height:calc(100% - 35px);
              width:600px;
              background:green;

            }

＆＃13;

        <div class="c">
          <div class="c1"></div>
          <div class="c2"></div>
          <div class="c3"></div>
        </div>

＆＃13;

Answer 2

我们的想法是将它们包装在容器周围并在该容器上使用TestMatrix = matrix(c(3,1,0,0,0,4,0,1,0,0,2,1,1,2,0,6,1,0,1,0,1,0,0,0,0),5,byrow = TRUE) TestSparseMatrix = Matrix(TestMatrix,sparse = TRUE) # Logarithmic function when applied to regular matrix -log(TestMatrix / rowSums(TestMatrix), 2) #Output # [,1] [,2] [,3] [,4] [,5] #[1,] 0.4150375 2.000000 Inf Inf Inf #[2,] 0.3219281 Inf 2.321928 Inf Inf #[3,] 1.5849625 2.584963 2.584963 1.584963 Inf #[4,] 0.4150375 3.000000 Inf 3.000000 Inf #[5,] 0.0000000 Inf Inf Inf Inf # Logarithmic function when applied to Sparse matrix -log(TestSparseMatrix / rowSums(TestSparseMatrix), 2) # Output # [,1] [,2] [,3] [,4] [,5] #[1,] 0.2876821 1.386294 Inf Inf Inf #[2,] 0.2231436 Inf 1.609438 Inf Inf #[3,] 1.0986123 1.791759 1.791759 1.098612 Inf #[4,] 0.2876821 2.079442 Inf 2.079442 Inf #[5,] 0.0000000 Inf Inf Inf Inf，这将使容器填充页眉和页脚之间的空间。

然后在flex-grow:1;查询中，将此容器的@media更改为flex-direction。这将使row和.main在大屏幕上并排显示。

＆＃13;

aside

＆＃13;

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;
}

＆＃13;

Answer 3

当您使用包装弹性框时，无法填充横轴方向的剩余空间 - 我想您需要一个列 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>

使用calc 不是很整洁你想在这里使用嵌套 flexbox（如果可以更改html ）：

为main和aside-1添加包装，并在中将其设为包装 flexbox行方向

将flex: 1添加到此包装以填充header和footer

之间的垂直空间
见下面的演示：

body, html { height: 100%; } .wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /*-webkit-flex-flow: row wrap;*/ /*flex-flow: row wrap;*/ flex-direction: column; 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; flex: 1 auto;/* ADDED THIS */ } .aside-2 { background: hotpink; } .wrapper > section { /* ADDED THIS */ display: flex; flex-flow:row wrap; flex: 1; padding: 0; overflow: auto; } @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;*/ margin: 0; }

<div class="wrapper"> <header class="header">Header</header> <section> <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> </section> <footer class="footer">Footer</footer> </div>

Answer 4

在阅读完所有其他答案后，我决定发布自己的答案。

我可能已经错过了已发布的内容或误解了这个问题，但对我而言，这应该是最简单的解决方案，不会更改任何标记。

如果这回答了你的问题，我会补充一个简短的解释原因/如何运作。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如果你能够更改标记，这里是我的一个版本，代码库比其他人给出的代码库简单得多，而且页眉和页脚没有固定的高度。

＆＃13;

html, body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.innerwrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  text-align: left;
}

@media (min-width: 600px) {
  .aside {
    flex: 1;
  }
}
@media (min-width: 800px) {
  .innerwrapper {
    flex-direction: row;
  }
  .aside-1 {
    order: -1;
  }
}



/*  for styling  */
.wrapper {
  font-weight: bold;
  text-align: center;
}
.wrapper > *:not(.innerwrapper),
.wrapper .innerwrapper > * {
  padding: 10px;
  box-sizing: border-box;
}
.header {
  background: tomato;
}
.footer {
  background: lightgreen;
}
.main {
  background: deepskyblue;
}
.aside-1 {
  background: gold;
}

＆＃13;

<div class="wrapper">
  <header class="header">Header</header>
  
  <div class="innerwrapper">
    <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>

＆＃13;

使用Flexbox，可以拉伸元素以填充行之间的间隙

4 个答案: