Flexbox 垂直填充可用空间 [英] Flexbox fill available space vertically

查看:25
本文介绍了Flexbox 垂直填充可用空间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

现在在 flexbox 行中我可以写

<div>一些内容</div><div flex></div><!-- 填充/增加可用空间--><div>另一个内容</div>

我想实现相同但垂直的,就像这张图片目前的问题是需要增长的 div 没有任何 高度,因此两个内容彼此低于.我希望我的第二个内容位于具有固定高度的父容器的底部!

我知道我可以通过定位第二个内容绝对和 bottom: 0; 来解决这个问题,但是我可以用 flexbox 来实现吗?

解决方案

所以你可以试试这个:

  1. flex-direction: column 用于 flex 容器.

  2. flex: 1 为需要填充剩余空间的元素.

查看下面的演示,其中 flexbox 跨越视口高度:

body {边距:0;}*{box-sizing: 边框框;}.排 {显示:弹性;弹性方向:列;高度:100vh;}.柔性 {弹性:1;}.row, .row >* {边框:1px 实心;}

<div>一些内容</div><div class="flex">这会填充可用空间</div><!-- 填充/增加可用空间--><div>另一个内容</div>

干杯!

Now in a flexbox row I can write

<div layout="row">
  <div>some content</div>
  <div flex></div> <!-- fills/grows available space -->
  <div>another content</div>
</div>

I would like to achieve the same but vertically, like on this picture Currently the problem is that the div which would need to grow doesn't have any height so the two contents are below each other. I want my second content to be at the bottom of the parent container which has a fixed height!

I know I could solve this by positioning the second content absolute and bottom: 0; but can I achieve this with flexbox?

解决方案

So you can try this:

  1. flex-direction: column for the flex container.

  2. flex: 1 for the element that needs to fill the remaining space.

See demo below where the flexbox spans the viewport height:

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

Cheers!

这篇关于Flexbox 垂直填充可用空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆