html - 如果一行中没有足够的空间，则将 flex-direction 切换到列

Question

在下面的例子中，我想要的是 .inner-flexbox有flex-direction: row;当它的子元素可以放在一行时，切换到 flex-direction: column;当他们不能。我不认为媒体查询是我想要的，因为我将基于视口(viewport)宽度是大于还是小于所有 <div> 的宽度来确定它们。在.inner-flexbox在一行加上<aside>的宽度.基本上，我不想要里面的元素 .inner-flexbox环绕——我希望它们全部在一行中，或者全部在一列中。

(精炼的例子):我有一个包含两个元素的 flexbox。一个是“普通”元素，另一个是另一个 flexbox。

.outer-wrapper
{
    display:flex;
    width: 100%;
    height: auto;
    background-color: gray;
    flex-wrap: nowrap;
}

.inner-flexbox
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.inner-flexbox > div
{
    width: 10rem;
    height: 10rem;
    background-color: salmon;
    margin: 10px;
}

aside
{
    background-color: blue;
    width: 15rem;
    height: 15rem;
}

<div class="outer-wrapper">
  <div class="inner-flexbox">
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
  </div>
  <aside><!-- Other content here --></aside>
</div>

Answer 1

试试这段代码

.outer-wrapper {
  display: flex;
  width: 100%;
  height: auto;
  background-color: gray;
  flex-wrap: nowrap;
}

.inner-flexbox {
  width: 75%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-between;
}

.inner-flexbox>div {
  width: 10rem;
  height: 10rem;
  background-color: salmon;
  margin: 10px;
}

aside {
  width: 25%;
  background-color: blue;
  width: 15rem;
  height: 15rem;
  float: right;
  display: block;
}

<div class="outer-wrapper">
  <div class="inner-flexbox">
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
  </div>
  <aside>
    <!-- Other content here -->
  </aside>
</div>