CODEWITHSUNDEEP
javascripthtmlcssflexboxcss-position
baband
baband

Reputation: 123

Is it ok to use flexbox in this way?

I'd like to make a nav header menu using flexbox to make it responsive the would look like this.

My idea is to use a display: flex; flex-direction: row; justify-element: space-between; on the main nav and then apply another display: flex; flex-direction: row; for the two menus, one using justify-element: flex-start; and the other one with justify-element: flex-end;

Would it be a correct method or do you think there are better ways to do the same thing? I also would like to have some dropdown sub-menu under some of those menu item, but for the moment I was just considering the main structure of the nav

Thank you!

Upvotes: 0

Views: 242

Answers (2)

lrpe
lrpe

Reputation: 799

Nesting flex elements is an effective and sometimes necessary way to achieve the desired result. Go for it.

And it's justify-content, no such thing as justify-element.

Upvotes: 1

MD M Nauman
MD M Nauman

Reputation: 431

The Best way you can use flexbox is first create a class name Flex_Container then give it the common values like display: flex, flex-direction, etc etc now to which element you want to make flex container just add this class so that this will stop the repetition of the code and we can give specific styling to those elements instead of repeating the same.

Now come to your part: Yes it looks good you can nest the flex box elements but make sure you use the correct properties like justify-element property doesn't exist.

All the best.

Upvotes: 2

Related Questions