如何讓 flexbox 子項填充垂直空間？

Question

我有一個帶有 2 個子容器的 flexbox 容器，稱為“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 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 */
}

現在，就您而言， 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 ，所以這應該不是問題。

如何讓 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