Flexbox vertical menu

index.html (2.3 KB)

Trying to adapt this prototype from https://www.youtube.com/watch?v=rSt_RTo8Gqs . Cannot seem to get the nav divs to center align.

(Ultimately I plan to have a background image behind the navigation text.)

What am I missing?

Add display: flex; to the nav CSS (the body > div > nav rule).

That did it. Thanks,

So “flex” is not global to the stylesheet. Makes sense.

Now, I am stuck on getting the background image behind the anchor. I try struggling with that on my own for awhile.

Thanks again.

I feel sure you’ve been reminded that flexbox is not intended to be a whole page layout mechanism. It is most suited to containers that benefit from the features of flexbox. As devices go, it requires the browser to perform too much math to assure that a complicated page will run smoothly.

point taken. Thanks

The property display: flex (among optional related others) is assigned to a container element. That property will affect only the direct children of that element.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.