Адаптивная верстка шапки сайта с помощью flexbox

Question

Искал в интернете -Адаптивная верстка шапки сайта. Но везде, где бы не смотрел - приводятся примеры с justify-content: space-between. Подскажите, как сверстать адаптивную шапку с процентными margin-ами (не подходящую под кальку флексбокса) относительно ширины всей шапки между элементами шапки и как заверстать адаптивность (к примеру шапка сайта состоит из 4-х блоков - логотипа, первого меню, второго меню и кнопок). Только расстояния не должны быть удобными - типа 25%, 50%, 75%, а должны быть наподобие - 27%, 30%, 43%, 59%, 57% (это просто примеры, а в том примере кода, который приведете вы могут быть любые неудобные расстояния- необязательно эти). Пример

самая первая строка.

1-й блок - Ваш регион Калининградская область, 2-й блок - меню, 3-й блок - Зарегистрируйся и получи подарок, 4-й блок - Войти на сайт. Или можно любую страницу с Примеров шапки сайта (но так чтобы блоков было бы хотя бы 3 и расстояния между ними были неудобными (см. выше)) Если нужен гамбургер, то уменьшите ширину блоков - гамбургер делать не надо (в таком случае 3-й блок просто Регистрация).

Answer 1

Пример адаптива

.header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.header-logo {
    flex: 0 1 25%;
}
.header-secondblock {
    flex: 0 1 20%;
    margin-left: 30%;
}
.header-lastblock {
    flex: 0 1 10%;
    margin-left: 15%;
}
.btn {
}

.my-ul {
    display: flex;
    list-style: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Test header</title>
</head>
<body>
    <header class="header">
        <div class="header-logo">
            Логотип
        </div>
        <div class="header-secondblock">
            <ul class="my-ul">
                <li>First item</li>
                <li>Second item</li>
                <li>Third item</li>
            </ul>
        </div>
        <div class="header-lastblock">
            <a href="" class="btn">First btn</a>
            <a href="" class="btn">Second btn</a>
        </div>
    </header>
</body>
</html>

Если кто-то знает, то также подскажите как без % задать адаптив.

БЛОГ НА HUSL

Адаптивная верстка шапки сайта с помощью flexbox

Ответы (1 шт):