Переходы flexbox без JavaScript

Я пытаюсь добавить переходы к отзывчивой навигации со свойствами flexbox. Когда окно уменьшается, последний элемент li уменьшается и растет.

Могу ли я сделать элемент li, который постепенно уменьшается, не используя JavaScript, только CSS-переходы?

* {
    padding: 0;
    margin: 0;
}

nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

nav ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    list-style: none;
    align-content: space-between;
    flex-flow: row wrap;
    transition: all 400ms linear;
}

nav ul li {
    background: #ccc;
    margin-left: 5px;
    padding: 10px 40px;
    margin-top: 10px;
    text-align: center;
    flex-shrink: 1;
    flex-basis: auto;
    flex-grow: 1;
}
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css" />
    <title>Menú Flexbox</title>
</head>

<body>
    <nav>
        <ul>
            <li>logo</li>
            <li>home</li>
            <li>interior</li>
            <li>innovation</li>
            <li>about us</li>
            <li>countact</li>
        </ul>
    </nav>

</body>

</html>

Возможно ли это с помощью медиа-запросов?

Источник

0 ответов

Другие вопросы по тегам