Question

在下面的示例中，我想要的是.inner-flexbox当其子元素可以放在单行时flex-direction: row;，但在不能的情况下切换到flex-direction: column;。我不认为媒体查询是我想要的，因为我会根据视口宽度是否大于或小于行中<div>中所有.inner-flexbox s的宽度加上<aside>的宽度。基本上，我不希望.inner-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

试用此代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

最后，我采用脚本编写，正如@LGSon所建议的那样。我用jQuery来比较内部flexbox的总宽度和容器的宽度减去旁边项目的宽度。

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

2 个答案: