设置主弹性容器和嵌套弹性容器之间的包装优先级

Posted 2023-03-05

【中文标题】设置主弹性容器和嵌套弹性容器之间的包装优先级

【英文标题】：Set wrapping priority between primary and nested flex containers

【发布时间】：2017-09-26 13:47:22

【问题描述】：

我有一个flexbox within a flexbox (JSFiddle)：

问题是左侧 div 中的项目比需要的更早开始换行（左侧 div 仍有收缩空间）。

内部的弹性盒应该只在外部的弹性盒包裹之后才包裹——只要外部的弹性盒还有空间，内部的弹性盒就不应该包裹，而外部的弹性盒应该收缩。

我尝试为.b_row 设置 100% 的宽度，但没有成功。

.m 
  display: flex;
  flex-wrap: wrap;

.l_1 
  background-color: red;
  flex: 1;
  padding: 15px;
  margin-left: auto;
  margin-right: auto;

.r_1 
  background-color: yellow;
  flex: 1;
  padding: 25px;
  margin-left: auto;
  margin-right: auto;

.b_1 
  padding: 15px;
  border-radius: 4px;

.b_row 
  display: flex;
  flex-wrap: wrap;
  width: 100%;

.b_item 
  flex: 1;

<div class=m>
  <div class=l_1>
    <div class=b_1>
      Left text
      <div class=b_row>
        <div class=b_item>Item 1
          <br>
          <input class=datepicker type=text size=10>
        </div>
        <div class=b_item>Item 2
          <br>
          <input class=datepicker type=text size=10>
        </div>
      </div>
    </div>
   </div>
  <div class=r_1>Right Item</div>
</div>

【参考方案1】：

考虑使用媒体查询来控制内部 flex 容器的包装行为。

而不是这个：

.b_row 
  display: flex;
  flex-wrap: wrap;
  width: 100%;

尝试以下方法：

.b_row 
  display: flex;
  /* flex-wrap: wrap; */
  width: 100%;


@media ( max-width: 300px ) 
   .b_row  flex-wrap: wrap; 

revised fiddle

【讨论】：

一个很好的解决方法，但仍然是一种解决方法 - 我无法相信这在 CSS 中是不可能的......

我认为这不是 CSS 的技术挑战。这更像是：浏览器应该如何知道您在不同容器之间包装的首选顺序？从浏览器的角度来看，这是任意的。

另外，不同的元素有不同的特点。例如，输入元素具有固有的最小宽度。如果里面有内容怎么办？然后呢？我不认为我的答案是一种解决方法。这就是存在媒体查询的原因。

好吧，如果没有办法告诉浏览器首选的包装顺序，那么 CSS 就坏了，我们必须依靠变通方法——但这并不能改变事实。