Flexbox CSS3 Basic Tutorial

Have you read about the basic concepts of flexbox?

If not, you can find out what flexbox is in various sources. Google help is highly recommended. You can also read here for an explanation of the flexbox concept in general.
For the first flexbox tutorial we will create a navigation bar using flexbox.

Create simple markup representing parent (ul elements with nav class) and child (li elements) relations and display nav buttons.


  • elements as flex items. The layout also changes to spread horizontally due to the selected direction row (and indeed this value is the default direction value). And notice, the interesting thing is that when we enlarge the viewport, the flex items will adjust to the proportional moment. We don’t need to bother adjusting the amount of space between flex items.