ITAddiction

Flexbox Navigation

Different layouts for responsive nav bars

Flexbox containers using different flexbox properties and values

Resize the browser to see functionalities.

Download the code, read the comments and play to learn more. Note that the navigation is also flexbox


Normal flexbox container

Home
About
Profile
Contact

Container using justify-content

Home
About
Profile
Contact

Container using align-items

Home
About
Profile
Contact

Container using align-self

Home
About
Profile
Contact

Container using flex

Home
About
Profile
Contact

Container using justify-content and align-items for perfect centering and wrap for responsivenes

Home
About
Profile
Contact

Container using flex, flex-wrap and media queries for responsive full width

Home
About
Profile
Contact