Can someone explain to me why do we need to do display flex on two elements for proper positioning?

https://codepen.io/Plebku/pen/vYvLaMg so

//why this below just doesnt position it properly?

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


//why does this below position it properly and why do we need to add display: flex on both elements for it to be positioned properly?


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

//why this below just doesnt position it properly?

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


//why does this below position it properly and why do we need to add display: flex on both elements for it to be positioned properly?


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

7 Replies

Choo♚𝕂𝕚𝕟𝕘•14mo ago

The "display:flex;" and "justify-content: space-between;" both influence the layout only of the direct children. Applying this to the nav affects the position of the ul elements inside the nav. This is what gives you one group on the left and another group on the right. Each of these ul groups also has children. Applying display flex to the ul allows those children to be on the same row. The justify-content isn't really needed on the ul. It doesn't make any difference unless you give extra width to the ul elements.

snxxwyy•14mo ago

^^ damn beat me to it 😂

Mannix•14mo ago

because you have to ul instead of one. So first to put them side by side on you need flex on the .nav and then you need flex on .nav ul put the li side by side. If you would just go with one ul and put margin:left: auto; on the sign in button you would get the same effect. Also you can use gap to space items instead of margin https://codepen.io/MannixMD/pen/jOXWvVd also you should ask this question in a CRL section 🙂

goky chan, plebku•14mo ago

ty guys, my bad didn't notice there was a specific channel for it 💀

C4rlos•14mo ago

Where is this section?

Mannix•14mo ago

go to <id:customize> scroll down and click Yes! this will give you permission to view that section

C4rlos•14mo ago

Thx, got it

Gaming

Programming

Can someone explain to me why do we need to do display flex on two elements for proper positioning?