Using flex: 1 auto;

Question

I'm trying to understand how this affects the flow of items in the flow architecture of elements like in this example:

How do we tell sidebars to share a row since sidebars are ordered on numbers 1 and 3?

There is a codepen live example here and here is a Stack snippet

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

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

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 2em; 
}

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

CSS fragment

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

The link in your question doesn't go to a live example, and the existing code sample is suppose to fully be within the question, as a minimal working snippet, not just a fragment of it. — Asons, Mar 08 '18 at 07:57
This answer of mine might give you some idea's, how to control flex items in a row/column manner: https://stackoverflow.com/a/48580275/2827823 — Asons, Mar 08 '18 at 08:29
I don't even understand, what do you mean share a row? Like sidebars on their own row? In your pen, both sidebars are already on the same row — Huangism, Mar 08 '18 at 15:14

Asons · Accepted Answer · 2018-03-10T11:59:08.530

What happens in this case is, item's having flex: 1 100% will simply take full width of its parent, and since the parent also has flex-wrap: wrap, it will put itself on a row of its own, and force its next sibling to the next row.

At min-width: 600px the first media query kicks in, where the two aside, when given flex: 1 auto, will start sizing by their content (auto) instead.

That mean that as long as their summed content is not wider than their parent, they will share a row, and then, having flex-grow set to 1, equally share the space left.

Do note, the aside are still ordered by markup as 3rd and 4th item. If their content size differs, both their content size is withdrawn from the parent's width, before the space to share is calculated, which simply mean they might not have the same width.

Also do note, if the two aside's summed content will be wider than their parent, they will wrap, as seen in this sample:

https://codepen.io/anon/pen/EExVav

Then at min-width: 800px the second media query also kicks in, where the main when set to flex: 3 0px, will stop forcing itself on a row if its own, and instead be as small as possible w/o content overflow (0px).

Now, with the same logic as for the two aside's, also main is included when calculating the space left, where the aside's will take 1/5 each and the main 3/5 of the space left.

The "dividend" is each item's "flex-grow" value and the "divisor" is the sum of the items "flex-grow" per row, which mean if one of the aside would wrap, the main and the other aside would share 3/4 and 1/4 of their shared row.

Additionally the rules changing the items order kicks in, and aside-1 and main swap position.

Using flex: 1 auto;

1 Answers1