Как увеличить ширину только одного дочернего элемента не затрагивая остальные во flexbox макете на основе столбцов?

Рейтинг: 0Ответов: 1Опубликовано: 12.01.2023

Всем привет. Если увеличить ширину любого из полей формы тогда остальные, само собой, подстраиваются под "самый широкий". А необходимо, чтобы ширина поля email была больше остальных, в данном случае, шире кнопки что находится под данным полем.

.connection {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            width: 100%;
            height: 50vh;
            background-color: #f6fbfb;
            text-align: center;
        }
        .h1-center.no-line { 
            background: none;
            padding: 0;
            margin: 0;
        }
        input[type=email] {
            min-width: 200px;
            background-color: white;
            color: #a6a6a6;
            padding: 5%;
            border: none;
        }
        input[type=submit] {
            font-size: 1vw;
            background-color: rgba(28, 28, 28, 0);
            border: 2px solid black;
            border-radius: 0.5em;
            color: black;
            padding: 5% 25%;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
}
#pole {
            display: flex;
            flex-direction: column;
            align-items: center;
}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0">
    <title>Макет</title>
<body>
<div class="connection">
    <h1 class="h1-center no-line">СВЯЖИТЕСЬ С НАМИ</h1>
    <form id="pole" action="#" autocomplete="on">
    <input type="email" id="email" name="email" placeholder="Ваш e-mail"><br><br>
    <input type="submit" value="Отправить">
    </form>
</div>
</body>
</html>

Как-то просто задавать проценты дочерним элементам кажется странным решением. Как это делается во flexbox?

css html flexbox
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

.connection {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            width: 100%;
            height: 50vh;
            background-color: #f6fbfb;
            text-align: center;
        }
        .h1-center.no-line { 
            background: none;
            padding: 0;
            margin: 0;
        }
        input[type=email] {
            min-width: 200px;
            background-color: white;
            color: #a6a6a6;
        }
        input[type=submit] {
            font-size: 1vw;
            background-color: rgba(28, 28, 28, 0);
            border: 2px solid black;
            border-radius: 0.5em;
            color: black;
            padding: 5% 25%;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            padding: 10px;
            width: 50%;
}
#pole {
            display: flex;
            flex-direction: column;
            align-items: center;
}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0">
    <title>Макет</title>
<body>
<div class="connection">
    <h1 class="h1-center no-line">СВЯЖИТЕСЬ С НАМИ</h1>
    <form id="pole" action="#" autocomplete="on">
    <input type="email" id="email" name="email" placeholder="Ваш e-mail"><br><br>
    <input type="submit" value="Отправить">
    </form>
</div>
</body>
</html>