Flexbox 3 列 100% 高度

Question

我知道有类似的问题，但我就是不明白。

我的网站使用 Flexbox（行）有 3 列彼此相邻。

我想要的只是每一列都将屏幕高度填满到 100%。当然布局还是要响应手机的。

<div class="flex-container">
    <div class="flex-col col1">Stuff</div>
    <div class="flex-col col2">Stuff</div>
    <div class="flex-col col3">Stuff</div>
</div>

CSS:

.flex-container {
     position: relative;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-evenly;
     overflow: hidden;
     align-items: stretch;
}
        
.col {
    text-align: center;
    width: 400px;
    font-size: small;
    padding:20px;
}

.col1 {
    background-color: grey;
}

.col2 {
    background-color: red;
    flex-grow: 2;
}

.col3 {
    background-color: green;
    flex-grow: 1;
}

Answer 1

您可以对每个 flex-col class 使用 height: 100vh;。

.flex-container{
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            overflow: hidden;
            align-items: stretch;
        }

        .col{

            text-align: center;
            width: 400px;
            font-size: small;
            padding:20px;
        }

    .col1{
    background-color: grey;
}


.col2{
    background-color: red;
    flex-grow: 2;
}

.col3{
    background-color: green;
    flex-grow: 1;
}


.flex-col {
  height: 100vh;
}

<div class="flex-container">
<div class="flex-col col1">Stuff</div>
<div class="flex-col col2">Stuff</div>
<div class="flex-col col3">Stuff</div>
</div>

Flexbox 3 列 100% 高度

Flexbox 3-Cols 100% height

css

height

flexbox