This is my first year teaching web design, and we are covering flexbox layout. I have run into a glitch with the flex property that I cannot find an explanation for anywhere.
I have reviewed this using a wide range of resources and all indicated that setting flex to 0 is the same as setting it to flex: 0, 0, auto. In this case, auto will use a flex item's width property as its flex-basis value. However, I am finding this to not be true. When using the shorthand method (as most of these resources suggest) of flex:0, this overrides my width value.
Here is the HTML:
<nav id="menu"><div id="Item1" class="menuitem">Item 1</div><div id="Item2" class="menuitem">Item 2</div><div id="Item3" class="menuitem">Item 3</div><div id="Item4" class="menuitem">Item 4</div><div id="Item5" class="menuitem">Item 5</div></nav>Here is the pertinent CSS:
.menuitem { width: 120px; padding: 3px; text-align: center; font-family: Arial; font-size: 16pt; font-weight: bold; flex: 0; }This is what I expected to happen from what I have researched (Flexbox row using flex: 0, 0, auto;):
However, here is the result I get (Flexbox row using flex:0;):
When I use the longer version, flex: 0, 0, auto;, all of my items are sized properly.
Curious to see if anyone has an explanation for why this would be occurring that I could pass along to my students.