why do I have to tell children to display flex when I already set the parent to flex?

Question

for example if the .nav-flex is the parent why arent my flex stylings appearing for my child anchor elements. I have to DISPLAY: FLEX on the child anchor element to make it appear flex.

(parent )

.nav-flex  {
  display: flex;
  flex-direction: row;
}

(child) /i have to insert display: flex down here for flex to work/

a {
  list-style-type: none;
  text-decoration: none;      
  flex-grow: 1;
  justify-content: space-around;
 }

Answer 1

The flex layout box model has two concepts:

• Flex containers

  A flex container is the box generated by an element with a computed display of flex or inline-flex.

• Flex items

  In-flow children of a flex container are called flex items and are laid out using the flex layout model.

Therefore, .nav-flex { display: flex } makes the .nav-flex a flex container and makes the a inside flex items.

Since a are flex items, flex-grow: 1 will make them grow to fill all the .nav-flex.

However, justify-content only applies to flex containers, so it won't work.

Instead, I think you want one of these (they are equivalent):

• Since the a flex items establish a new block formatting context for its contents, you can center its inline-level content using text-align:

  .nav-flex  {
    display: flex;
  }
  a {
    flex-grow: 1;
    text-align: center;
  }

  <nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>

• Remove the flex-grow: 1 to prevent the a from growing, and use the justify-content: space-around on .nav-flex to align them properly:

  .nav-flex  {
    display: flex;
    justify-content: space-around;
  }

  <nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>

• Make the a flex items so that their text content will be wrapped in a flex item, and align it with justify-content:

  .nav-flex  {
    display: flex;
  }
  a {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Or space-around */
  }
    

  <nav class="nav-flex"><a>Home</a><a>About</a><a>Contact</a></nav>