frontend не работает flex justify

Question

Не работает css свойство justify-content

Вот код короче:

* {
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
}
.content {
    flex:1;
    margin-bottom: 2vh;
}
.wrap-content-footer {
    min-height: calc(100vh - 5vh - 3vh); /* -headerHeight-headerMarginBottom*/
    display: flex;
    flex-direction: column;
}
.header-link {
    flex:1;
}
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9vh;
    min-height: 8vh;
    background: rgb(179, 179, 179);
}
footer {
    min-height: 3vh;
}

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{Title}}</title>

    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
    <header>
        <div class="header-link"><a href="{% url 'index:index' %}">Главная</a></div>
        <div class="header-link"><a href="{% url 'index:index' %}">Главная</a></div>
    </header>

    <div class="wrap-content-footer">
        <div class="content">{% block content %}{% endblock %}</div>

        <footer>
            Статус: {{statusbar}}
        </footer>
    </div>
</body>
</html>

Answer 1

Ну так space-between распределяет равномерно "элементы". А у тебя в хедере он только один. Попробуй flex-star, flex-end или center.

БЛОГ НА HUSL

frontend не работает flex justify

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