flex box 专门用于堆叠项目的 CSS？ [复制]答案

【问题标题】：flex box specialize CSS for stacked item? [duplicate]flex box 专门用于堆叠项目的 CSS？ [复制]
【发布时间】：2020-07-31 03:37:43
【问题描述】：

对于一个 wrap flex 盒子，是否可以在盒子堆叠后修改盒子的行为？（在纯 CSS 中）。

以这个玩具为例，

p {
  border: dashed 1px;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

#item1 {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: end;
  align-content: end;
  background: blue;
}

#item2 {
  flex: 3 1 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: start;
  align-content: start;
  background: red;
}

<div id="container">
  <div id="item1">
    <p>This is the item 1.</p>
    <p>item 1.</p>
  </div>
  <div id="item2">
    <p>This is the item 2.</p>
    <p>item 2.</p>
  </div>
</div>

一旦蓝色框被堆叠（通过调整窗口大小），是否可以将 p 项目居中。我期待的是这样的：

#item2: wrap {
  align-items: center;
  align-content: center;
}

在纯 CSS 中真的可以吗？

【问题讨论】：

没有。您无法检测到弹性项目何时换行。
@Turnip 我们可以在 flex-items 上使用任何 CSS 属性，唯一的情况是使用 flex-basis 和 width，在这种情况下会应用 flex-basis。
@ImranRafiqRather 你完全误解了这个问题。
@萝卜：我的坏兄弟，我现在明白了。让我试着看看如何处理这个问题。我接受我的错误并感谢您纠正我:)
@Turnip 刚刚更新了答案，谢谢你阻止我分享错误的信息。上帝保佑:)

标签： html css

【解决方案1】：

不，到目前为止这是不可能的:)。我们应该有一个事件告诉弹性项目的弹性包装何时发生，然后通过使用 javascript 中的事件处理程序，我们可以在 Javascript 中为弹性项目更改 CSS。但是到目前为止我还没有找到我们这样的活动。

所以，不可能。

【讨论】：

这如何解决问题中所述的问题？ "将 p 项居中，一旦蓝色框被堆叠（通过调整窗口大小）"
@turnip：所以当 flex-items 堆叠起来时，他当然可以使用 text-align:center，将他的项目居中
OP 表示当您缩小窗口并且块换行到新行时。
@Turnip 即使我们调整窗口大小和弹性项目堆栈也是可能的，我在弹性盒子上做了很多项目......
@Imran 你误解了这个问题对不起。目标是动态修改 flex 项 css 属性，仅当 flex 项堆叠（从行到列）时。在示例中，仅在纯 CSS 中右框移动到左框下方时（减小窗口大小时）尝试使文本居中。