Flex menu - Stretch

Flex styles used:

Level 1{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; align-content: stretch; } Item{flex-grow: 1;} Text{white-space: nowrap;] Subnav indicator{display: inline-block; position: static;}

Flex Menu - Spread, but not grow items

CSS used

Level 1{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; align-content: stretch; text-align: center;} Item:first-child{min-width: 100px;} Subnav indicator{display: inline-block; position: static;}

Flex Menu - Wraps & Right Aligned

CSS Used:

level 1{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: stretch; text-align: center;} Subnav indicator{display: inline-block; position: static;}

Flex Menu - Centered on both axes

CSS Used:

Level 1{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; text-align: center; } Subnav indicator{display: inline-block; position: static;}

Horizontal Flex Menu

CSS Used:

Level 1{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; align-content: stretch;} Level 2{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; align-content: stretch;}