Hi guys,
I’m trying to do this challenge (updated link) but I’m struggling for some reason, I’ve been practising flexbox a lot and felt comfortable with it but this has me stumped I can’t even align everything on the same line.
Usually I have a containing div containing other divs, when I set the display to flex it does what I need, everything is aligned on one line.
Also I’d like to know how to have space between ‘a’ links.
Thanks
I’m not seeing any CSS in the link you gave us (other than a comment). Show us what you are trying to do and then we can help nudge you in the right direction if you are having problems.
https://codepen.io/YKKZIP/pen/BazEvoe
This is one of my attempts. Usually I would have everything inside the container and can control them all with .flex-container{ display:flex; } Obviously there’s something here I’m not seeing as I can’t seem to control ‘brand’ along with the links, either one or the other.
So I’m not quite sure what you are trying to do since I don’t know what this challenge is? Can you describe in a little more detail what you want the layout to be? Do you want the h1 and navigation list to be on the same? Are you allowed to add elements to the HTML?
Try the link now.
The challenge was to get the same result as in the two photos above.
I thought it was be a simple seeing as flex-box places all the items on on the same axis but for some reason that’s not happening.
OK, I see, it should be responsive and show the single column version for narrow widths and the single row version for wider widths.
I always start narrow and work my way out. For the narrow version, I don’t think you need any special layout at all since the the list will automatically fall below the h1 and the items in the list will create a single column, right? So the only thing you need to do here is style it to make it look like the pic.
For the wider with version, you’ll want the list to make a single row instead, which you did using display: flex on the list. Now you just need the h1 and the list to line up vertically. Just like you did with the list, you can use display: flex on .flex-container to make that happen.
Thank you for your reply, that code wasn’t response at all for some reason.
I’ve created a fresh link for a better example this is how I normally would do it everything is on one line and can control them all inside the same container.
This is why I’m struggling as I don’t know why the other code doesn’t do the same.
Both the h1 and the navigation list are in one container (.flex-container), so you have the ability to control them by setting display:flex on the flex-container. I think the class name itself should be a big hint as to what you should do 
Yes, I’ve tried .flex-container { display: flex; } along with all the other flex options but it’s not working.
Using the link you provided above, I added display:flex to the flex-container and it worked for me. Try it again and if it still doesn’t work leave it in codepen so we can see what you are doing.
https://codepen.io/YKKZIP/pen/GRqLVvL
This is what I’m trying to do with the above codepen but it’s not working like it is here. It’s wrapping how I want it to wrap and it’s all within the same container under one ‘display:flex’
(just seen your post, will try)
[edit]
https://codepen.io/YKKZIP/pen/BazEvoe
I have this.
OK, you’ve got the h1 and list on the same line now. Don’t you need the list items to be on the same row as well? Why did you remove the display: flex on the list?
tbh I’ve spent way too long on this. I don’t know what I’m doing!
I want everything to be like I done here Everything is on the same line, everything falls under one flex container then I can make adjustments after.
I don’t know how to how to make the list items on the same row.
Yes you do, you had them in a single row originally when you had display:flex set on the list. For some reason you removed that.
I think this discussion has gone on long enough. You can message me directly if you need more help.
I couldn’t tell you how I got the spacing between the links, nor how I got them in a row as I was randomly changing/adding bits of code until something worked.
As I mentioned this code https://codepen.io/YKKZIP/pen/GRqLVvL I quickly made with no issues. But for some reason, this method does not work with the other code. Whether that’s because using links changing things I don’t know.
Then you need to learn more about how to use flexbox. I recommend this site:
I guess so. Thank you for your time, I appreciate it.
[edit] https://codepen.io/YKKZIP/pen/BazEvoe
Think I was just staring at the screen too long, will finish it tomorrow.
