CSS space between inside another flex element

Question

I am trying to make simple nav-bar with logo, nav-links and button. and space everything evenly

I have wrapper around those 3 items and i apply display:flex and than inside list i again apply display:flex but justify-content doesn't affect list items, they are merged together.

.nav-wrapper{
    display: flex;
    justify-content: space-evenly;

    background: rgba(245, 253, 255, 0.8);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
}
.nav--list{
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    
}

<div class="nav-wrapper">
    <img src="./images/logo.svg" alt="" class="logo">
    <nav class="nav">
        <ul class="nav--list">
            <li class="nav--list-item"><a href="#" class="nav-link boldy">Why Magic Massage</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Features</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Reviews</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">FAQ</a></li>
        </ul>
    </nav>
    <a href="#" class="order-now button">ORDER NOW</a>
</div>

`justify-content: space-between` does not mean "reserve space between the elements", but "if there is extra space, put it between elements". Due to the way the parent element is sized, there is no extra space to distribute. Use `padding` and `margin` instead. EDIT: TIL about `gap`; `gap` is better. — Amadan, Jan 10 '23 at 10:15

score 2 · Accepted Answer · answered Jan 10 '23 at 10:17

You can use gap. https://developer.mozilla.org/en-US/docs/Web/CSS/gap

.nav-wrapper{
    display: flex;
    justify-content: space-evenly;
    background: rgba(245, 253, 255, 0.8);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
}
.nav--list{
    display: flex;
    justify-content: space-between;
    gap: 20px; /* add gap */
    margin: 0;
    padding: 0;
    list-style: none;
    
}

<div class="nav-wrapper">
    <img src="./images/logo.svg" alt="" class="logo">
    <nav class="nav">
        <ul class="nav--list">
            <li class="nav--list-item"><a href="#" class="nav-link boldy">Why Magic Massage</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Features</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Reviews</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">FAQ</a></li>
        </ul>
    </nav>
    <a href="#" class="order-now button">ORDER NOW</a>
</div>

score 2 · Answer 2 · answered Jan 10 '23 at 10:24

Use css gap or column-gap property in your nav--list class:

.nav-wrapper{
    display: flex;
    justify-content: space-evenly;
    background: rgba(245, 253, 255, 0.8);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
}
.nav--list{
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    column-gap: 1.5em;
}

<div class="nav-wrapper">
    <img src="./images/logo.svg" alt="" class="logo">
    <nav class="nav">
        <ul class="nav--list">
            <li class="nav--list-item"><a href="#" class="nav-link boldy">Why Magic Massage</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Features</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Reviews</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">FAQ</a></li>
        </ul>
    </nav>
    <a href="#" class="order-now button">ORDER NOW</a>
</div>

CSS space between inside another flex element

2 Answers2