Flexbox 3-Cols 100% высота - PullRequest
Новая
       18

Flexbox 3-Cols 100% высота

0 голосов
/ 08 апреля 2020

Я знаю, что есть похожие вопросы, но я просто не могу ответить на них.

Мой сайт имеет 3 колонки рядом друг с другом, используя Flexbox (Row).

Все, что я хочу, это чтобы каждый Колонка заполняет экран высотой до 100%. OF Конечно, макет должен по-прежнему реагировать на мобильные телефоны 

<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;
}

1 Ответ

1 голос
/ 08 апреля 2020

вы можете использовать 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>
...