I'm trying to apply flexbox on the header tag and also apply flexbox on the ul tag which is inside the header tag (nested flexbox), for the outer flexbox justify-content: space-between; was used and it worked properly, however when using justify-content: space-between;" for the inner flexbox too it doesn't do anything, I was expecting it to seperate each navbar list item with some space in between like it did for the outer flexbox, it can be achieved using margin but why is using justify-content: space-between;" not working like it did for the outer flexbox?.

JSX

import { NavLink } from "react-router-dom";
import classes from "./Navbar.module.css";

function Navbar() {
  return (
    <header className={classes.header}>
      <div>Logo</div>
      <nav className={classes.nav}>
        <ul>
          <li>
            <NavLink to="./">Home</NavLink>
          </li>
          <li>
            <NavLink to="./">News</NavLink>
          </li>
          <li>
            <NavLink to="./">Contact</NavLink>
          </li>
          <li>
            <NavLink to="./">About</NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default Navbar;

CSS

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding: 0 10%;
  background-color: aquamarine;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

nav a {
  text-decoration: none;
}

CodePudding user response：

Both flex boxes are technically working as intended.

They are not giving you the desired layout by default, because the flex-item parent nav of the inner flex container got no inherent "width" information other than inner flex items text content.

3 possible solutions:

1. parent of inner flex continer <nav>: set fixed or relative width
2. inner flex items <li>: set fixed width or flex-basis
3. inner flex items <li>: add some appropriate spacing

CodePudding user response：

that is because there is no space available for the nav links to take. the parent flex divides the space available to be equal for the two items. so to achieve what you want, you need to define the spaces of each part.

one way to achieve that is to use flex-grow.

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding: 0 10%;
  background-color: aquamarine;
}

// here I give the logo equal size of space as the nav
// you can change the values whatever you desire.

div {
  flex-grow: 4  //div for logo
}

nav {
  flex-grow: 4
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

nav a {
  text-decoration: none;
}

CodePudding user response：

You should add a width to nav, i.e. the parent of the flex ul, otherwise both of these will only use just the space of it's contents (i.e. all lis without any distance between them), and therefore justify-content won't be effective at all.

I added 40% width in my edit of your code below - tha's enough to demontrate the effect of justify-content: space-between, but adjust that as needed. Note that I also removed the default padding from the ul and used box-sizing: border-box; on everything to include the padding into the width to not let the page overflow horizontally in the snippet.

* {
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding: 0 10%;
  background-color: aquamarine;
}

nav {
  width: 40%;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

nav a {
  text-decoration: none;
}

<header className={classes.header}>
  <div>Logo</div>
  <nav className={classes.nav}>
    <ul>
      <li>
        <NavLink to="./">Home</NavLink>
      </li>
      <li>
        <NavLink to="./">News</NavLink>
      </li>
      <li>
        <NavLink to="./">Contact</NavLink>
      </li>
      <li>
        <NavLink to="./">About</NavLink>
      </li>
    </ul>
  </nav>
</header>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>