Question

我正在尝试让元素填满flexbox中的横轴。在下面的示例中，我有一个固定高度的项目占用了整行，而有两个项目占用了下一行。

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  align-items: stretch;
  align-content: flex-start;
}
div {
  border: 3px solid red;
  flex-grow: 1;
}
div#a {
  flex-basis: 100%;
  height: 100px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="a" style="background-color:green">AAA</div>
  <div id="b" style="background-color:blue">BBB</div>
  <div id="c" style="background-color:yellow">CCC</div>
</body>

</html>

如果您将align-content上的body更改为stretch，您可以看到身体最小高度的效果 - 第二行会粘在底部。但是，行之间现在存在差距。

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  align-items: stretch;
  align-content: stretch;
}
div {
  border: 3px solid red;
  flex-grow: 1;
}
div#a {
  flex-basis: 100%;
  height: 100px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="a" style="background-color:green">AAA</div>
  <div id="b" style="background-color:blue">BBB</div>
  <div id="c" style="background-color:yellow">CCC</div>
</body>

</html>

我想删除这个间隙，以便块B和C占用所有剩余空间。

Answer 1

基本上，使用当前结构，flexbox没有选项......并且它应该是不合逻辑的。

另一方面，如果知道第一个伪行的高度，你可以使用calc通过设置第二个div的高度来设置第二个伪行的高度.... em>但它并不是“flexbox解决方案”。

html {
  height: 100%;
}
body {
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
}
div {
  border: 3px solid red;
  flex-grow: 1;
}
div#a {
  flex-basis: 100%;
  height: 100px;
}
div#b {
  height: calc(100% - 100px);
}

<body>
  <div id="a" style="background-color:green">AAA</div>
  <div id="b" style="background-color:blue">BBB</div>
  <div id="c" style="background-color:yellow">CCC</div>
</body>

Answer 2

试试这个

html {
  min-height: 100vh;  
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#a {
  flex: 0 1 100px;  
}

.group {
  display: flex;
  flex: 1;
  flex-direction: row;
}

.group div {
  flex: 1; 
}

<div id="a" style="background-color:green">AAA</div>
<div class="group">
  <div id="b" style="background-color:blue">BBB</div>
  <div id="c" style="background-color:yellow">CCC</div>
</div>

如何使元素展开以填充flexbox中的横轴？

2 个答案: