FexBox Example - flex-flow: row wrap - Why .main, .aside-1, and .aside-2 fitting on a single line ?

[r9young]

Yes, your understanding is correct!

1. Main Element (flex: 3 0px):

   • With flex: 3, the .main element is designed to occupy three times as much space as any item with flex-grow: 1.
   • If there are no aside elements (or other elements to compete for space), .main would still expand to fill the entire row because of the flex-grow: 3 property.

2. Flex-Wrap Behavior:

   • The flex-flow: row wrap ensures that the flex items (like .footer) will wrap to a new line if there's no space left on the current line.
   • When .main, .aside-1, and .aside-2 occupy the entire width of the first row, the .footer element has to move to the next line due to the wrapping behavior.

Overall, the combined layout behavior ensures that each item is arranged proportionally and wraps if there isn't enough space.

[r9young]

You're right. Setting flex-grow does not prevent additional elements from being placed within the same flex container, like adding a sidebar. Here's how it works:

1. Proportional Expansion (flex-grow):

   • The flex-grow property controls how much space an element will take relative to other elements in the same flex container.
   • For example, .main with flex: 3 will occupy three times more space than any sibling elements with flex: 1.

2. Adding More Elements (e.g., Sidebar):

   • If you add extra elements like a sidebar (with .aside-1 and .aside-2), they will still fit within the same flex container.
   • Each additional element will grow according to its own flex-grow value.

3. Proportional Allocation:

   • Each element will receive space proportionally based on its flex-grow value.
   • For example, if .main has flex: 3 and each sidebar has flex: 1, .main will grow to take three times the space of each sidebar.

4. Overall Layout:

   • The layout remains flexible:
     • If the container is wide enough (e.g., 800px or more), all elements will align in a row, each taking its proportional space.
     • If the container isn't wide enough, the flex-wrap: wrap behavior will kick in, and the remaining items will wrap to the next line.

Summary

• Flexibility: flex-grow allows flexible space allocation while leaving room for extra elements.
• Proportional Growth: Each item takes its proportional share, regardless of how many additional elements are included.

Let me know if this helps clarify your understanding!

[r9young]

Another example

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center; 
}

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

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; } /*flex-grow: 3 (grow to fill extra space) flex-shrink:0 (can shrink if needed), flex-basis: 0px)*/
  .aside-1  { flex: 3 0px; } 
  .aside-2  { flex: 3 0px; } 
  .aside-1 { order: 1; } /*flex-shrink: 1 allows them to shrink. see above*/
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

30% 30% 30%