如何让 flexbox 子项填充垂直空间？

Question

I have one flexbox container with 2 sub-containers called "left-col" & "right-col".我有一个带有 2 个子容器的 flexbox 容器，称为“left-col”和“right-col”。 I want the children to fill up the entire vertical space.我希望孩子们填满整个垂直空间。 Setting flex:1 didn't work the way I want it do.设置 flex:1 没有按照我想要的方式工作。

EDIT: I tried out all the answers, but haven't been able to accomplish my goal.编辑：我尝试了所有答案，但未能实现我的目标。 I thought it might not be working, because I have different things in my actual HTML & CSS that might interfere, so I decided to upload a snippet of the actual page, below.我认为它可能不起作用，因为我的实际 HTML 和 CSS 中有不同的东西可能会干扰，所以我决定在下面上传实际页面的片段。

EDIT: I tried it with grid and it didn't work the way I wanted it to, because it's dependent on right-col's image size.编辑：我用 grid 尝试了它，但它没有按照我想要的方式工作，因为它取决于 right-col 的图像大小。 I'm trying to research how to do this with JavaScript now.我现在正在尝试研究如何用 JavaScript 做到这一点。

 :root { --primary: #414141; --secondary: #F2F2F2; --accent: #9CBACD; } @import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans&display=swap'); * { padding: 0px; margin: 0px; box-sizing: border-box; font-family: 'Open Sans' } body { background: #fff; } h1, h2, h3 { font-family: 'Montserrat'; color: var(--primary) } h1 { font-size: 2.5rem; } h2 { padding: 1rem 0; } h3 { padding: 1rem 0 0.5rem 0; } .title { padding: 1rem 2rem; background: #fff; } .wrapper { margin: 0 2rem; position: relative; } a { text-decoration: none; color: #000; /* cursor: pointer; */ } img { width: 100%; } main { margin-top: 60px; } /* Hero */ main .hero { text-align: center; padding: 4rem 0; background: #fff; } main .hero p { font-size: 0.8rem; } /* Hero END */ /* Project area */ .projects { background: var(--secondary); padding: 0.5rem 0; } .projects .title { background: var(--secondary); } .box { max-width: 100%; height: 30vh; background: white; margin-top: 1rem; } .box+p { color: var(--primary); margin-bottom: 1rem; } .button { color: #fff; padding: 0.5rem 1rem; border-radius: 2rem; text-align: center; margin: 0 auto; } .projects .button { background: var(--primary); } @media only screen and (min-width: 600px) { #index-thumb { flex-direction: row; align-items: center; width: 100%; height: 70%; margin: 0; } .thumbnail .left-col { display: flex; flex-direction: column; } .thumbnail .right-col { flex-basis: 100%; } /* I have thumbnail classes on a different page too, that's why I have the following styling */ .thumbnail { width: 33.33%; padding: 1rem 0; margin: 0 -1rem; } .thumbnail .thumb-container { padding: 0 1rem; } } .thumbnail { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem 0; } .thumbnail .thumb-container { max-width: 100%; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <title>Test</title> </head> <body> <main> <section class="hero"> <div class="wrapper"> <h1>Hi</h1> <p>Text</p> <p>See more</p> </div> </section> <section class="projects"> <h2 class="title">Work</h2> <div class="wrapper"> <div class="thumbnail" id="index-thumb"> <div class="left-col"> <div class="thumb-container"> <img src="https://i1.wp.com/mannerofspeaking.org/wp-content/uploads/2009/05/black1.gif" alt=""> <h3>Work 1</h3> </div> <div class="thumb-container"> <img src="https://i1.wp.com/mannerofspeaking.org/wp-content/uploads/2009/05/black1.gif" alt=""> <h3>Work 2</h3> </div> </div> <div class="right-col"> <div class="thumb-container"> <img src="https://i1.wp.com/mannerofspeaking.org/wp-content/uploads/2009/05/black1.gif" alt=""> <h3>Work 3</h3> </div> </div> </div> <a href="work.html" class="button">See more</a> </div> </section> </main> </body>

Answer 1

You have to remove the align-items: flex-start .您必须删除align-items: flex-start 。

This is the code fixed.这是固定的代码。

html html

<div class="thumbnail" id="index-thumb">
  <div class="left-col">
    <div class="thumb-container">
      <img src="img/test.png" alt="">
      <h3>Work 1</h3>
    </div>
    <div class="thumb-container">
      <img src="img/test.png" alt="">
      <h3>Work 2</h3>
    </div>
  </div>
  <div class="right-col">
    <div class="thumb-container">
      <img src="img/test.png" alt="">
      <h3>Work 3</h3>
    </div>
  </div>
</div>

css css

.thumbnail {
    display: flex;
    /*align-items: flex-start;*/
    padding: 1rem 0;

}

#index-thumb {
    flex-direction: row;
    width: 100%;
    height: 70%;
    margin: 0;
}

.thumbnail .left-col {
    display: flex;
    flex-direction: column;
}

.thumbnail .right-col {
    flex-basis: 100%;
}

.thumb-container img{
  background: black;
  width: 200px;
  height: 200px;
}

Answer 2

RESULT结果

HTML HTML

<div class="thumbnail">
  <div class="left-col">
    <div class="thumb-container">
      <img src="#" alt="">
      <h3>Work 1</h3>
    </div>
    <div class="thumb-container">
      <img src="#" alt="">
      <h3>Work 2</h3>
    </div>
  </div>

  <div class="right-col">
    <div class="thumb-container">
      <img src="#" alt="">
      <h3>Work 3</h3>
    </div>
  </div>
</div>

CSS CSS

.thumbnail {
  display: flex;
  align-items: center;
  flex-direction: row;
}

/*  Setting images size */
img {
  background: red;
  width: 20px;
  height: 20px;
  display: block;
}


.thumbnail .left-col {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.thumbnail .right-col {
  border: 1px solid black;
  display: flex;

  align-self: stretch; /* Filling up vertical space */
  align-items: center; /* Centering content */ 
}

/*  Setting a different size for work 3 image */
.thumbnail .right-col img {
  width: 100%;
  height: 50px;
}

Answer 3

The crudest way of doing this is a bit hacky, but it works.这样做的最粗略的方法有点老套，但它有效。 Set a height to your divs .right-col AND .thumb-container .为您的 div .right-col AND .thumb-container设置高度。

.right-col, .right-col > .thumb-container {
  height: 100%;
  box-sizing: border-box; /* this is so that height rendering includes any margin or padding */
}

Now, in your case, div.thumb-container contains <img> and <h3> .现在，就您而言， div.thumb-container包含<img>和<h3> 。 And, I guess you want the image to "fit" nicely to cover as much height as available.而且，我猜您希望图像“适合”以覆盖尽可能多的高度。 If so, you may want to set the height of <img> too, as 100% minus h3-height .如果是这样，您可能还想将<img>的高度设置为100% 减去 h3-height 。 The quickest, practical way to calculate <h3> 's height would be from your browser's Developer Tools.计算<h3>高度的最快、最实用的方法是通过浏览器的开发人员工具。

So, finally, <img> height can be set as:所以，最后， <img>高度可以设置为：

height: calc(100% - {N}px); /* where {N} is the height of <h3> */
max-height: calc(100% - {N}px); /* doesn't hurt to set this too */

Note: calc() is a CSS3 function, but so is flex , so this should not be a problem.注意： calc()是一个 CSS3 函数，但flex ，所以这应该不是问题。

如何让 flexbox 子项填充垂直空间？

问题描述

3 个解决方案

解决方案1
1 2019-12-07 17:14:56

解决方案2
0 2019-12-07 18:06:23

解决方案3
0 2019-12-08 08:53:17

如何让 flexbox 子项填充垂直空间？

问题描述

3 个解决方案

解决方案1 1 2019-12-07 17:14:56

解决方案2 0 2019-12-07 18:06:23

解决方案3 0 2019-12-08 08:53:17

解决方案1
1 2019-12-07 17:14:56

解决方案2
0 2019-12-07 18:06:23

解决方案3
0 2019-12-08 08:53:17