html - Flexbox：弹性流列；flex-basis 100% 在没有明确高度的情况下无法工作

Question

我正在为自己构建一个具有两列内容布局的网站，其中列的纵横比为 1:2，并且我试图避免将 Grid 用于我认为 Flexbox 可以轻松处理的东西。但是，如果没有为父元素设置显式的非百分比高度，我所有尝试从窄的左列到宽的右列flex-basis: 100%;都无法使用。我不知道该怎么办。我已经使用了这篇文章并参考了多个问题的解决方案，但实际上没有任何效果。

我正在使用 Firefox 72，这应该可以在最新版本的 Firefox 中使用。

:root {
  --bodywidth: 80vw;
  --flexbasis: calc(var(--bodywidth) / 8);
  --spacebasis: calc(var(--flexbasis) / 12);
  --columnwidth: calc(var(--bodywidth) / 3);
}


/* https://tobiasahlin.com/blog/flexbox-break-to-new-row/ */

hr.break {
  border: none;
  margin: 0;
  padding: 0;
  flex-basis: 100%;
  flex-grow: 1;
}

hr.row.break {
  height: 0;
}

hr.col.break {
  width: 0;
}

main {
  display: flex;
  flex-flow: column wrap;
  /* height: 100%; /* << DOES NOT WORK */
  /* height: 100vw; /* << Works perfectly fine, but NOT ideal */
}


/* vv As a bonus, these rules somehow make everything 2 column widths wide when only the stuff AFTER the break should be that wide */

main :not(.break) {
  min-width: var(--columnwidth);
  width: 100%;
}

main hr.break+* {
  width: calc(var(--columnwidth) * 2);
}

<main>
  <section>
    <h1>About</h1>
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  </section>

  <section>
    <h1>Disclaimer</h1>
    <p>Here there be naughty things!!!</p>
  </section>

  <!-- The amount of content on both sides of the break varies, as do the dimensions of the sections -->
  <hr class="col break" />

  <article class="blog">
    <h1>Blog Entry</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend molestie orci. Donec pellentesque viverra magna, nec viverra velit laoreet non. Etiam blandit erat nulla, semper faucibus eros rhoncus vel.</p>
  </article>

</main>

如果必须的话，我可以捏着鼻子使用 Grid 并使其工作，但无论想象如何，它都不是理想的，并且需要大量额外的 CSS 才能使其工作。如果有人有解决方案，我宁愿使用 Flexbox。

标签： htmlcssflexbox

Answer 1

恕我直言，grid 和 mediaquerie 是管理从 1 列布局到 2 列布局的切换的好方法。

想法演示：

:root {
/* possible use of var here */
--col1 : 1fr;
--col2 : 2fr;
}
main {
  display: grid;
  grid-template-columns: var(--col1) var(--col2);
}
main> * {
  border:solid 1px;
  margin:2px;
}
section {
  grid-column:1;
}
article {
  grid-column:2;
  grid-row:1 / 10;
}

/* breakpoint at 768px */
@media screen and (max-width: 768px) {
  main {
    display: flex;
    flex-flow: column;
  }
  main section + section {/* best is to use an id */
    order: 1;
  }
}

<main>
  <section>
    <h1>About</h1>
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  </section>
  <section><! -- that one might deserve an id to easy reorder its position -->
    <h1>Disclaimer</h1>
    <p>Here there be naughty things!!!</p>
  </section>
  <article class="blog">
    <h1>Blog Entry</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend molestie orci. Donec pellentesque viverra magna, nec viverra velit laoreet non. Etiam blandit erat nulla, semper faucibus eros rhoncus vel.</p>
  </article>

</main>