Question

我想在窗口屏幕中有三个堆叠列。第一个设置高度取决于设置的HTML内容，第二个也是flexibel，因为js会附加很多标记。最后一列应该具有300px的设置高度或填充屏幕的其余部分。

有关如何使用flexbox进行响应的任何建议吗？

<div class="flexbox">
  <div class="flex-child red">Flexibel height(HTML already in place)</div>
  <div class="flex-child orange"> content will be displayed from js so flexibel height </div>
  <div class="flex-child yellow">I would like to have a set height on this one</div>
</div>

.flexbox {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-child {
  flex: 1;
}

https://codepen.io/anon/pen/KZYgzx

Answer 1

您现在编写的代码是让每个项目占用父项中可用空间的相等空间。

最后一列的设定高度应为300px或填充屏幕的其余部分。

如果您仅对最后一项使用flex: 1，则会占用剩余的可用空间。

＆＃13;

html,body {margin: 0; }

.flexbox {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-child:last-child {
  flex: 1;
}

.red {background: red;}
.orange {background: orange;}
.yellow {background:yellow;}

＆＃13;

<div class="flexbox">
  <div class="flex-child red">Flexibel height,<br>with 2 lines</div>
  <div class="flex-child orange"> A lot of content will be displayed with js,<br>here with more than<br>2 lines</div>
  <div class="flex-child yellow">I would like to have a set height</div>
</div>

＆＃13;

如果您仅在最后一项上使用flex-basis: 300px，则它将是：

300px high，如果有足够的空间且内容不高
填充空间，如果空间不足且内容不高，
如果内容高于300px或填充的可用空间，则不会缩小超过内容高度

＆＃13;

html,body {margin: 0; }

.flexbox {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-child:last-child {
  flex-basis: 300px;
}

.red {background: red;}
.orange {background: orange;}
.yellow {background:yellow;}

＆＃13;

<div class="flexbox">
  <div class="flex-child red">Flexibel height,<br>with 2 lines</div>
  <div class="flex-child orange"> A lot of content will be displayed with js,<br>here with more than<br>2 lines</div>
  <div class="flex-child yellow">I would like to have a set height</div>
</div>

＆＃13;

Answer 2

只需将flex: 0 0 300px代替height: 300px添加到固定高度div即可。这意味着：

0 =不长大
0 =不收缩
300px =从300px开始

Your pen

Answer 3

试试这个：

＆＃13;

.flexbox {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-flow: columns wrap;
}

.red{
  width:auto;
  background: red;
}
.orange{
  max-height:300px;
  background: orange;
}
.yellow{
  width:100%;
  background:yellow;
}

＆＃13;

<div class="flexbox">
  <div class="flex-child red">Flexibel height(HTML already in place)</div>
  <div class="flex-child orange"> content will be displayed from js so flexibel height </div>
  <div class="flex-child yellow">I would like to have a set height on this one</div>
</div>

＆＃13;

您必须设置列方向（我使用了wrap，但您也可以根据需要使用nowrap）。对于第一个auto，第二个max-width或width（如果您想设置），最后一个100%。

与flexbox的堆积的列

3 个答案: