Understanding the flex property

Question

Why, in this example, is the .main element (blue) dividing space only with .aside-1 (yellow) and .aside-2 (pink), and not with all ele

Answer 1

First take a look at this rule in your code:

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

The selector above is targeting all five flex items:

• header
• article
• aside
• aside
• footer

The flex component breaks down to this:

• flex-grow: 1
• flex-shrink: 1 (by default)
• flex-basis: 100%

You wrote:

Why, in this example, is the .main element (blue) dividing space only with .aside-1 (yellow) and .aside-2 (pink), and not with all elements?

This is why:

1. The container is set to flex-flow: row wrap, meaning flex items are allowed to wrap.
2. As noted above, all flex items are set to flex-basis: 100% (i.e. width: 100%), meaning there can only be one flex item per row, except...
3. flex-basis: 100% only gets applied to the header and footer because...

4. it is being overridden by other rules later in the cascade sequence¹:

   .main { flex: 3 0px; }
   
   .aside { flex: 1 auto; }
   

However, I've noticed that with a nowrap wrapper the smallest item is .main.

Yes, because, as mentioned above, it has flex-basis: 0 and flex-shrink: 1.

In .main we say flex: 3 0px, which I think says, this element will be 3x bigger than the other four elements and will occupy 3/(3+1+1+1+1).

Not quite. flex-grow: 3 means that the element will consume 3x the amount of free space than other flex items with flex-grow: 1. It doesn't necessarily mean it will be 3x the size. More details here: flex-grow not sizing flex items as expected

---

¹ It may appear that specificity should win over the cascade, and all items should get flex-basis: 100%:

• .wrap > * { flex-basis: 100%; } vs .main { flex: 3 0px; }
• .wrap > * { flex-basis: 100%; } vs aside { flex: 1 auto; }

Except that the universal selector (*) has zero specificity. So in this case, all selectors have equal specificity and source order matters.