Question

我有一个flexbox容器，其中有2个子容器，分别称为“ left-col”和“ right-col”。我希望孩子们填满整个垂直空间。设置flex：1并不能达到我想要的效果。

编辑：我尝试了所有答案，但未能实现我的目标。我认为它可能无法正常工作，因为我的实际HTML和CSS中存在可能干扰的其他内容，因此我决定在下面上传实际页面的代码段。

编辑：我在grid上进行了尝试，但它没有按我想要的方式工作，因为它取决于right-col的图像大小。我正在尝试研究现在如何使用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

您必须删除align-items: flex-start。

这是固定的代码。

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

.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

结果

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

.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

最粗略的方法有点棘手，但可以。为您的div .right-col和.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 */
}

现在，在您的情况下，div.thumb-container包含<img>和<h3>。而且，我想您希望图像能够很好地“适合”以覆盖尽可能多的高度。如果是这样，您可能还希望将<img>的高度设置为 100％减去h3-height 。计算<h3>高度的最快，实用的方法是使用浏览器的开发人员工具。

因此，最后，<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 */

注意：calc()是CSS3函数，但是flex也是CSS3函数，因此这应该不是问题。

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

3 个答案: