0

Код, представленный ниже генерирует 5 элементов флексбокс. Как сделать так, чтобы ширина-высота этих элементов уменьшалась, если пользователь, например, уменьшить размер экрана браузера?

.container{
    display: flex;
    width: 1440px;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.item{
    width: 600px;
    height: 400px;
    background-color: blue;
    margin: 2rem;
    /*flex: 1 2 auto;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="item">

        </div>

        <div class="item">

        </div>

        <div class="item">

        </div>

        <div class="item">

        </div>

        <div class="item">

        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

1 ответ 1

1

Высоту в vh задавать, а вообще flexbox задавайте в процентах чтоб пропорционально уменьшались.

.container{
    display: flex;
    width: 1440px;
    max-width:100%;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.item{
    width: 33%;
    max-width:600px;
    height: 80vh;
    background-color: blue;
    margin: 2rem;
    /*flex: 1 2 auto;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="item">

        </div>

        <div class="item">

        </div>

        <div class="item">

        </div>

        <div class="item">

        </div>

        <div class="item">

        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

2
  • почти то, что нужно, но как сделать, чтобы по вертикали тоже сжималось пропорционально? То, что предложили Вы, работает только на сжатие по горизонтали 10 июл 2020 в 12:09
  • @IWProgrammer чтоб сжималось по высоте - задаёте высоту в единицах vh и всё, обновил ответ.
    – EVG
    10 июл 2020 в 12:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.