Flexbox 不会重新计算样式

Posted

技术标签:

【中文标题】Flexbox 不会重新计算样式【英文标题】:Flexbox doesn't recalculate styles 【发布时间】:2017-03-01 12:50:14 【问题描述】:

在 Chrome 和 Safari 中,div 的宽度仅计算一次。 dom 树的任何更改、添加或删除类以及调整窗口大小都会被忽略。 如何在不重新加载页面的情况下强制重新计算宽度?

https://jsfiddle.net/7xpoccg6/7/ 在那里垂直调整演示区域的大小,然后单击 Run 以重新加载新大小的示例。 或者在sn-p中使用整页切换。

html, body, section 
  margin: 0;
  height: 100%;


section 
  display: flex;


section:before, section::after 
  content: "";
  flex: 1 0 0px;
  background: antiquewhite;
  height: 100%;


div 
  flex: 0 1 auto;
  height: 50%;
  background: green;
  align-self: flex-end;


svg 
  height: 100%;
  display: block;
<section>
  <div class="c">
    <svg viewBox="0 0 1000 2000" class="avatar">
      <ellipse cx="500" cy="1000" rx="500" ry="1000" fill="red" />
    </svg>
  </div>
</section>

【问题讨论】:

在我的 FF 中看起来也有问题(宽度未更新,svg 部分隐藏)......你可能会使用弹性框,但对于 webkit,我想你需要在 resize 时强制回流。 (例如在悬停和位置的小提琴中):jsfiddle.net/7xpoccg6/10 @GCyrillus,在我的 FF 中,它更新得很好,但很慢 - 有明显的滞后。 【参考方案1】:

正如评论的那样,您可以使用 flexbox 并在屏幕上强制回流以唤醒 webkit:

vh 值为 min-width 的示例:

html,
body,
section 
  margin: 0;
  height: 100%;


section 
  display: flex;


section:before,
section::after 
  content: "";
  flex: 1;/* this should be enough */
  background: antiquewhite;
  height: 100%;


div 
  /* flex value unnecessary i think */
  display: flex;
  height: 50%;
  background: green;
  margin: auto 0 0;/* can be used instead align-self */


svg 
  height: 100%;
  min-width:0.1vh;/* hack to force reflow */
  display: block;
<section>
  <div class="c">
    <svg viewBox="0 0 1000 2000" class="avatar">
      <ellipse cx="500" cy="1000" rx="500" ry="1000" fill="red" />
    </svg>
  </div>
</section>

https://jsfiddle.net/7xpoccg6/12/

&lt;edit&gt;不知道这是否是一个已知错误以及是否记录在任何地方,

任何人,请填写以改进此答案

注意,垂直调整窗口(或框架窗口)大小时会重新计算 vh 单位,适用于 sn-p/fiddle。

【讨论】:

不确定,动态插入元素时是否有效,但很好! 添加最小宽度似乎会在调整屏幕大小时为我重新计算弹性宽度。整洁的信息 - 谢谢!

以上是关于Flexbox 不会重新计算样式的主要内容,如果未能解决你的问题,请参考以下文章

React Bootstrap flexbox 不会拉伸到内容高度

使用 ReactJS 的跨浏览器 flexbox 内联样式

如何使用 flexbox 让中间元素始终完美居中 [重复]

具有固定列宽的流动 flexbox 网格

CSS Flexbox 样式根据元素数量变化

使用反应原生flexbox样式创建视图组件网格的Bug