如果连续空间不足，则将 flex-direction 切换到列

Posted 2023-03-07

【中文标题】如果连续空间不足，则将 flex-direction 切换到列

【英文标题】：Make flex-direction switch to column if there's not enough space in a row

【发布时间】：2017-09-02 05:24:52

【问题描述】：

在下面的示例中，我想要让.inner-flexbox 在其子元素可以放在一行时拥有flex-direction: row;，但当它们不能放在flex-direction: column; 时切换到flex-direction: column;。我认为媒体查询不是我想要的，因为我会根据视口宽度是大于还是小于连续 .inner-flexbox 中的所有 <div>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>

【问题讨论】：

媒体查询在这里是有意义的，因为你不想换行，你想立即从水平切换到垂直。

是否有适合这些目的的媒体查询？如果是这样，我对这个想法持开放态度。

jsfiddle.net/b36j7Lk1

@Michael_B 只要您知道项目的宽度，它就可以正常工作。这很快就会变得复杂，尤其是当您开始更改内容并且项目的宽度不再相同时。从我的问题来看：“我不认为媒体查询是我想要的，因为我会根据视口宽度是否大于或小于 .inner-flexbox 中所有 的宽度行加上 的宽度。"

@Michael_B 直到现在我都忘了给 一个宽度我的例子，但是一旦我把它添加到你的例子中并添加了 flex-shrink: 0;为了防止它被压扁，媒体查询分崩离析。还是谢谢。

【参考方案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>

【讨论】：

抱歉，我可能不太清楚。我确实不希望inner-flexbox 中的项目进行换行。我希望它们全部在一行中，或者全部在一列中。如果没有足够的空间让它们在行布局中，inner-flexbox 内的项目应该只在列中。

【参考方案2】：

最后我求助于脚本，正如@LGSon 建议的那样。我使用 jQuery 将内部 flexbox 的总宽度与容器的宽度减去它旁边的项目的宽度进行比较。