html - 使用 flex : 1 auto;

Question

我试图了解这如何影响元素流架构中的元素流，如本例所示:

既然侧边栏按数字 1 和 3 排序，我们如何告诉侧边栏共享​​一行？

有一个 codepen 实例 here这是一个堆栈片段

.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 片段

.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; }
}

Answer 1

在这种情况下发生的情况是，具有 flex: 1 100% 的元素将简单地占据其父级的整个宽度，并且由于父级也具有 flex-wrap: wrap，它将自己放在自己的一行，并强制其下一个 sibling 到下一行。

在 min-width: 600px 处，第一个媒体查询开始，其中两个 aside，当给定 flex: 1 auto 时，将开始根据内容调整大小(auto)。

这意味着只要它们的总和内容不比它们的父级宽，它们就会共享一行，然后将flex-grow设置为1，平分剩余空间。

请注意，aside 仍按标记排序为第 3 项和第 4 项。如果它们的内容大小不同，则在计算要共享的空间之前，它们的内容大小都会从父级的宽度中撤消，这仅仅意味着它们的宽度可能不同。

另请注意，如果两个 aside 的总和内容将比它们的父级宽，它们将换行，如示例所示:

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

---

然后在 min-width: 800px 第二个媒体查询也开始，其中 main 设置为 flex: 3 0px，将停止强制自己排成一排，而是尽可能小，没有内容溢出 (0px)。

现在，使用与两个 aside 相同的逻辑，在计算剩余空间时也包含 main，其中 aside 各占 1/5，main 占剩余空间的 3/5。

“红利”是每个元素的“flex-grow”值，“除数”是每行“flex-grow”元素的总和，这意味着如果其中一个放在一边 将换行，main 和另一个 aside 将共享其共享行的 3/4 和 1/4。

此外，更改元素 order 的规则开始生效，aside-1 和 main 交换位置。