CSS flexbox - same size menu items
Hello,
Today we have two examples of menu (navigation):
1.the wider item gets more space
2.same (equal) size menu items
https://codepen.io/810311/pen/LYWmmOG
Example # 1 - menu items grow and shrink from the flex-basis of 'auto', the longer item gets more space
flex: auto = flex: 1 1 auto
We target our list items with shorthand flex: auto; which corresponds to flex: 1 1 auto;
flex: 1 (flex grow = yes) 1 (flex shrink = yes) auto (flex basis 'auto' means flexbox is using 'max-content' size as initial value and as a result the widest item gets more space)
Inspect width of 'li' in Chrome
Example # 2 - same (equal) size menu items
flex: 1 = flex: 1 1 0
If we change flex-basis in the above example to 0 (zero), flexbox is using zero as initial size and as a result all items get equal width
Inspect width of 'li' in Chrome