0

Есть заголовок магазина, и надо поисковую строку разместить посередине, корзину/аккаунт справа. Но, justify-self результата не дает, а margin-left: auto; просто не позволяет поставить поиск. строку посередине, как мне расположить все это с помощью flex-box?

<header>
    <a href="#"><img class="logo" src="res/plaza-logo.png" alt="logo.png" height="49.8" width="204"></a>
    <div class="search-box"><input type="search"></div>
    <a class="shopping-cart" href="#"><img src="res/mini-ico/cart.png" alt="cart.png"></a>
    <a class="account" href="#"><img src="res/mini-ico/acc.png" alt="acc.png"></a>
</header>

header{
    position: absolute;
    width: 100%;
    height: 10%;
    left: 0;
    top: 0;
    display: flex;
    background-color: cornflowerblue;
}

.search-box input{
    justify-self: center;
    color: cornflowerblue;
}
.account{

}
.shopping-cart{
    justify-self: flex-end;
    margin-left: auto;
}
a{
    text-decoration: none;
}

введите сюда описание изображения

1 ответ 1

0

Прежде, чем приступать к работе, советую ознакомится с этим.

Собственно, решение:

header {
    display: flex;
    justify-content: space-between;
}

justify-content указывает, как обрабатывать свободное место. В нашем случае мы говорим, что первый и последний элементы должны касаться краёв родителя, а свободное место внутри распределяется равномерно между элементами (то есть внутренние блоки, сколько бы их ни было, встанут на одинаковом расстоянии друг от друга).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.