Ссылки навигации flex без медиазапросов

Question

Есть ссылки меню, которые, на десктопе расположены в столбик (сайдбар слева). При изменении размера, сайдбар изменяет положение и приобретает вид узкой полосы между шапкой и контентом. Всё бы ничего, но ссылки в нём размазываются по всей длине. Можно ли как-то это контролировать, чтобы они смещались влево?

.sidebar {
    flex-basis: 20rem;
    flex-grow: 1;
}

.with-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.nav {
    display: flex;
    flex-grow: 1;
    flex-basis: 22vw;
}

<div class="sidebar">
    <ul class="with-nav">
        <li class="nav"><a href="articles.xhtml">Articles</a></li>
        <li class="nav"><a href="store.xhtml">Store</a></li>
        <li class="nav"><a href="contacts">Contacts</a></li>

    </ul>
</div>

Answer 1

Нужно либо убрать display: flex; для пунктов <li> (здесь это все равно кажется не нужным):

.sidebar {
    flex-basis: 20rem;
    flex-grow: 1;
}

.with-nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.nav {
    list-style: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sidebar">
        <ul class="with-nav">
            <li class="nav"><a href="articles.xhtml">Articles</a></li>
            <li class="nav"><a href="store.xhtml">Store</a></li>
            <li class="nav"><a href="contacts">Contacts</a></li>
    
        </ul>
    </div>
</body>
</html>

Либо, если принципиально, чтобы пункты списка <li> имели display: flex;, можно указать максимальную ширину для них:

.sidebar {
    flex-basis: 20rem;
    flex-grow: 1;
}

.with-nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.nav {
    display: flex;
    flex-grow: 1;
    flex-basis: 22vw;
    max-width: fit-content;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sidebar">
        <ul class="with-nav">
            <li class="nav"><a href="articles.xhtml">Articles</a></li>
            <li class="nav"><a href="store.xhtml">Store</a></li>
            <li class="nav"><a href="contacts">Contacts</a></li>
    
        </ul>
    </div>
</body>
</html>

БЛОГ НА HUSL

Ссылки навигации flex без медиазапросов

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