The adaptive horizontal menu, part 1

Flexbox is useful for creating blocks with child items whose length changes dynamically. A good example is a menu.

You will often encounter designs in which menu items are evenly distributed across the menu block. The first item nearly touches the left end of the menu block, and the last one nearly touches the right end (where there are small margins between the edge and the item).

You can try to solve this problem by setting fixed margins and a fixed width for the menu items. But this method will not work if the number of menu items or labels inside them change.

And this is where Flexbox can help out. Set Flexbox layout for the menu, and the menu items will become flex items. We can achieve the desired result using the justify-content item distribution property.