Css 样式在 Safari 中有效，但在 chrome/safari 中显示不同。Flex 在 Chrome/firefox 中的工作方式不同吗？我错过了什么？答案

【问题标题】：Css style works in Safari, but displays different in chrome/safari.Does Flex work differently in Chrome/firefox? what am i missing?Css 样式在 Safari 中有效，但在 chrome/safari 中显示不同。Flex 在 Chrome/firefox 中的工作方式不同吗？我错过了什么？
【发布时间】：2020-04-06 23:24:21
【问题描述】：

我整天都在挠头，不知道该去哪里找。第一张图片（左），Safari 输出是我期待的结果，但不知何故在 Chrome 中它的工作方式有所不同。我唯一的结论是 flex 在 chrome 上的工作方式不同，但我不确定。

我知道我的 css 可以工作，因为我可以在 safari 中获得预期的输出。我希望有人能指出我正确的方向。非常感谢任何建议或链接。谢谢。

fieldset.property{ 
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    display: flex; flex-flow: row nowrap;
    border-radius: 5px; border: 1px solid currentcolor;
    margin: 10px 0;
}
fieldset.reference{
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    display: flex; 
    flex-flow: column wrap;
    border-radius: 5px; border: 1px solid currentcolor;
    margin: 10px 0;
}

.radio_wrap, .unit_wrap{border: 1px solid yellow;}
fieldset.property .radio_wrap{
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    flex: 0 0 30%;
    display: flex; flex-flow: column nowrap;
    align-items: flex-start;
    padding: 15px 0;
}
fieldset.property .unit_wrap{
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    flex: auto;
    display: flex; flex-flow: column nowrap;
}

【问题讨论】：

您应该发布您的代码。排除故障会更容易。您很可能需要指定 nowrap。
@AustinJones，它确实没有包裹，这是我期待的结果（左 img），我在 safari 中确实得到了。
如果没有看到 css，我们只能猜测。你在使用供应商前缀吗？

标签： css google-chrome safari flexbox alignment

【解决方案1】：

兄弟试试这个

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

为我工作

【讨论】：

发布的代码：unit_wrap/radio_wrap 是两个黄色边框。

【解决方案2】：

终于发现我的代码出了什么问题，长话短说，不能将 fieldset 设置为 display:flex。感谢所有试图提供帮助的人。

参考： Why can't <fieldset> be flex containers?

【讨论】：