Very simple flex not working and I need your help.
I am trying to achieve something that seems relatively simple, but I'm tearing my hair out trying to work out what I've done wrong.
https://codepen.io/Dan-Brownson/pen/Rwvazex
Issue #1
My intention is to have a navbar (.nav-container) on the side of the webpage, 285px wide. The remaining width of the webpage should be filled with the main content (.main-container).
With my current html & CSS, I would expect the yellow nav bar to be exactly where it is, however i would not expect this huge gap between the nav-container and the main-container.
Issue/question #2
The next intention is to make it so that on screens smaller than 1024px, the navbar moves to the bottom of the screen, and the height will change to 185px, and the width will be 100vw.
The only way i was able to get this to work is by setting no-wrap, and column-reverse.
I am just trying to work out why setting it to row-reverse wouldn't work here?
From my understanding row would look like this
--
--
and column like this
I I
I I
I I
Thank you in advance!
3 Replies
Followup: I changed my body flex-direction to Row, and removed the flex-wrap. And now it works.
Am I grossly misinterpretting row and column?
with
flex-direction:row; you put all children in one row (left to right) with flex-direction: column; you put them in one column (top to bottom)Oh I see! So my incorrect interpretation was that if i set two separate elements to row, they would stack on top of each other in rows. That makes so much sense now!
Thank you for your response honestly!