时间戳

首页 > 解决方案 > Flexbox 3-Cols 100% 高度

css - Flexbox 3-Cols 100% 高度

问题描述

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

我的网站使用 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;
}

标签： cssflexboxheight

解决方案

你可以height: 100vh;为每个flex-col班级使用。

.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>

推荐阅读