时间戳

首页 > 解决方案 > 如何让 flexbox 子项填满垂直空间？

javascript - 如何让 flexbox 子项填满垂直空间？

问题描述

我有一个带有 2 个子容器的 flexbox 容器，分别称为“left-col”和“right-col”。我希望孩子们填满整个垂直空间。设置 flex:1 没有按我想要的方式工作。

编辑：我尝试了所有答案，但未能实现我的目标。我认为它可能不起作用，因为我的实际 HTML 和 CSS 中有不同的东西可能会干扰，所以我决定在下面上传实际页面的片段。

编辑：我用网格尝试过它并没有按照我想要的方式工作，因为它依赖于 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>

标签： javascriptcssflexboxfrontend

解决方案

您必须删除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;
}

推荐阅读