Hi, I am having some problems understanding the correct functionality of flex.
I am doing the Product Landing Page of the Responsive Web Design Projects, but I have problem understanding how to position stuff, for example in the header, I got a logo and a nav-bar(whit 3 diferent items), flex helps me order them but only relatibly to each other, For example i want to put the logo on the top left side, and the nav-bar on the top right side.
I am trying to understand how they did it on here (https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed) whit the follow button, when you add the display: flex; it positions itself in the top right, but I can not understand why it does this.
Here is the link to my web code so far= (" https://codepen.io/JFrancoRodriguez/pen/VwyZVvj ")
Sorry for bad english is not my mother tongue, and sorry if I dident explain myself correctly, I am kinda new to this
hope this helps
Hello @JustFranco
The justify-content property in Flexbox aligns items along the main axis, default horizontal. When you give it the value space-around it will leave equal amount of space around the items. To achieve what you want, you’ll want to give this property the value space-between.
You can learn more about CSS Flexbox by playing this game:
Check it out. It will help you understand Flexbox more.
Also, you have a lot of padding on your header. This will influence your desired result.
Thank you, this clarifies a lot.
Wow, thank you a lot, that is an amazing way of explaining flexbox, know I understand a lot more of what I used to.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.