Using flex messes up my whole page

https://codepen.io/gtrman97/pen/jOVpzLw

I had everything nice for this product landing page challenge. The last challenge was " My product landing page should utilize CSS flexbox at least once". But when I wrote

body {
  
  display: flex;
  
}

at the top it threw everything all over the place like crazy. Should I have added this rule at the start of the project? And should you preferably always use this rule for every project?

Flex-direction is row by default (it’s trying to make a row from child elements), add flex-direction:column to body, you page will look familiar again :wink:
Flex makes creating layouts much easier once you are comfortable with it

1 Like

It’s not usually a good idea to just add something like that without understanding how it works, especially on the body :slight_smile:

You’ve got a great opportunity to use flexbox on your nav links if you use a <ul> for them. By default the <li>s will stack on top of each other, so you can use flexbox on the <ul> to get them to stack in one row instead. By the way, it is a commonly accepted best practice to use a list for nav links like this.

1 Like