css почему не работает justify-content?

Question

Пробую сделать меню в header. У меня не получается сделать отступления между элементами меню. Я задаю display: flex и justify-content: space-around, но все равно все стоит на месте. Что я делаю не так? Спасибо вам большое

import React from "react";

export let Header = () => {
return (<header className='header'>
<div className='logo'><img src="/LogoPhoto/Logo.png"/></div>
           <div className='menu'>
                <div><a>Піца</a></div>
                <div><a>Суші</a></div>
                <div><a>Салати</a></div>
                <div><a>Десерти</a></div>
                <div><a>Напої</a></div>
            </div>

</header>)
}

.header {
width: 100%;
height: 90px;
background: linear-gradient(gray, burlywood);
display: flex;
}

.menu{
display: flex;
justify-content: space-around;
margin-left: 95px;
}

Answer 1

Потому что у Вашего меню нету ширины, соответственно, нет свободного пространства, которое можно было бы распределить между пунктами:

.header {
width: 100%;
height: 90px;
background: linear-gradient(gray, burlywood);
display: flex;
}

.menu{
display: flex;
justify-content: space-around;
margin-left: 95px;
border: 1px solid red;
}

<header class='header'>
<div class='logo'><img src="/LogoPhoto/Logo.png"/></div>
  <div class='menu'>
    <div><a>Піца</a></div>
    <div><a>Суші</a></div>
    <div><a>Салати</a></div>
    <div><a>Десерти</a></div>
    <div><a>Напої</a></div>
  </div>
</header>

А вот если задать меню ширину, условно, 100%, тогда между элементами появится пространство:

.header {
width: 100%;
height: 90px;
background: linear-gradient(gray, burlywood);
display: flex;
}

.menu{
display: flex;
justify-content: space-around;
margin-left: 95px;
width: 100%;
}

<header class='header'>
<div class='logo'><img src="/LogoPhoto/Logo.png"/></div>
  <div class='menu'>
    <div><a>Піца</a></div>
    <div><a>Суші</a></div>
    <div><a>Салати</a></div>
    <div><a>Десерти</a></div>
    <div><a>Напої</a></div>
  </div>
</header>

Answer 2

знаю што ответ дан уже,но попробуй сделать на css grid,удобнее чем на flex

БЛОГ НА HUSL

css почему не работает justify-content?

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