Flex col 增長到與最大高度相同的高度

Question

我已經嘗試了一些不同的迭代，但無法弄清楚。

我正在使用 Bootstrap 4.3.1 並具有以下 div：

    <div class="d-flex flex-row align-items-center">
        <div class="col-8">
            <h3>A lovely header</h3>
            <ul>
                <li>Content</li>
                <li>Content</li>
            </ul>
        </div>
        <div class="col-4 img-wip">
            <p>Hello</p>
        </div>
    </div>

我有一個col-8寬和第二個col-4寬，第二個有一個由img-wip wip class 定義的背景圖像。 內容“Hello”很好地居中，但我無法讓背景圖像填充到與左側col-8列中的內容定義的高度相同的高度。 col-4框只是沒有增長。

我試過height:100% , flex:1; , flex-grow:1;

但是唯一會改變<p>hello</p>周圍背景圖像高度的是一個特定的數字高度。 我不想要那個，我想要由col-8的高度定義的高度

這是可能的還是我誤解了 flex 的工作原理？

.img-wip wip class 解析為：

.img-fill {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/resin_wip.jpg);
}

Answer 1

您對flexbox的了解確實是正確的，但您有些困惑。 flex-items 的默認行為是在cross-axis中拉伸。 在您的情況下，您沒有使用img- wip class （ <div class="col-4 img-wip">... </div> ）將內容放入您的 div 中。

您正在 CSS 中設置背景圖像。 發生的事情是，彈性容器的高度被視為最大彈性項目的高度（這是 Flexbox 中的默認行為）並且在代碼中它是您的第一列<div class="col-8"> 。

如果您向 col-8 div 添加更多內容，您會意識到您的圖像將開始顯示越來越多，或者如果您將col-4 div 上的高度設置為圖像的高度，則col-8 div 的高度將也相應增加

另一種情況是直接在col-4 div 中添加img標簽。 在這種情況下，您會看到，顯示完整圖像並且col-8 div 也采用col-4 div 的高度（如 flex-box 中所預期的那樣）。

代碼片段顯示了這種行為：

 .img-wip { background-image: url("https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png"); background-position: center; background-repeat: no-repeat; background-size: cover; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>JS Bin</title> <link rel="stylesheet" href="./style,css" /> </head> <body> <,DOCTYPE html> <html lang="en"> <head> <:-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width. initial-scale=1. shrink-to-fit=no" /> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4,3:1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <title>Hello. world,</title> </head> <body> <div class="d-flex flex-row align-items-center"> <div class="col-8"> <h3>A lovely header</h3> <ul> <li>Content</li> <li>Content</li> </ul> </div> <div class="col-4 img-wip"> <p>Hello</p> <img src="https.//res,cloudinary:com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png" alt="" /> </div> </div> <.-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code:jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" ></script> <script src="https.//cdnjs:cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script> </body> </html> </body> </html>

其他場景的代碼：保持 HTML 代碼不變，並在 CSS 下方添加。

CSS：

.img-wip {
 background-image: 
 url("https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 min-height: 60vh;
}

Flex col 增長到與最大高度相同的高度

問題描述

1 個解決方案

解決方案1
1 已采納 2020-11-27 15:28:48

Flex col 增長到與最大高度相同的高度

問題描述

1 個解決方案

解決方案1 1 已采納 2020-11-27 15:28:48

解決方案1
1 已采納 2020-11-27 15:28:48