使用 flexbox 使子 div 達到父級的 100% 高度

Question

我正在嘗試制作左側圖像的祖父<div class="col"> ，填充其父容器的高度，使其與右側圖像的高度相同。 我想讓它具有響應性，所以我嘗試使用 flexbox 但無法弄清楚，因為父級正在使用flexbox: row ，而您需要flexbox: column使其填充其父級的高度。 我知道height: 100%有效，但前提是我設置了父容器的高度，這是我不想要的，因為我希望它具有響應性。

這是我的代碼：

 <div class="justify-content-center row row-cols-4" style="display: flex; position: relative; background: linear-gradient(rgb(253, 221, 57) 0px, rgb(253, 221, 57) 0px) center bottom / 100% 70% no-repeat;"> <div class="col" style="display: flex;"> <div style="position: relative; align-self: flex-end;"><img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;"></div> </div> <div class="col" style="display: flex;"> <div style="position: relative; align-self: flex-end;"><img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;"></div> </div> </div>

Answer 1

干得好。

<div class="columns">
  <div class="col">
    <div class="row">
      <img class="img-1" src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png">
    </div>
    <div class="col">
      <div class="row">
        <img class="img-2" src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png">
      </div>
    </div>
  </div>
</div>

CSS

.columns {
  display: inline-flex;
  width: 100%;
  height: auto;
  background: linear-gradient(rgb(253, 221, 57) 0px, rgb(253, 221, 57) 0px) center bottom / 100% 70% no-repeat;
}

.img-1 {
  width: 50%;
  float: right;
  display: flex;
  flex-wrap: wrap;
}

.img-2 {
  height: auto;
  width: 63%;
  display: flex;
  flex-wrap: wrap;
  float: right;
}

.col {
  display: inline-flex;
}

.row {
  max-width: 48%;
  display: block;
  margin: 0 auto;
}

我的印象是你在自學，這真是太棒了！ 請繼續！！ 此外，一旦您完成 HTML 層的編寫，請將樣式抽象為 CSS 類。 然后玩弄你的 CSS，直到你為每個元素找到正確的答案。

我因此得出了這個解決方案。

1. 將每一列和行命名為col-1 、 col-2 、 row-1 、 row-2等。
2. 給兩個圖像一個類。
3. 檢查元素並逐一瀏覽每個元素，直到我得出每個元素的答案。
4. 將.col和.row回食物鏈。

當然，總是從 HTML 開始。 但是一旦你有了一個粗略的草圖，抽象出 CSS 並享受一些樂趣。