Flex 属性在 Safari 浏览器中不起作用 [重复]答案

【问题标题】：Flex property not working in Safari browser [duplicate]Flex 属性在 Safari 浏览器中不起作用 [重复]
【发布时间】：2017-12-07 11:05:59
【问题描述】：

 .rq-search-container {
    position: relative;
    width: 100%;
    background: white;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-radius: 2px;
    z-index: 30;
    -webkit-flex: 1 0 15em;
  }

它在 chrome、Mozilla 浏览器中完美运行，但在 Safari 浏览器中无法运行。

我已经尝试了很多方法，例如 -web-kit-flex 等，但没有奏效。请推荐我！

【问题讨论】：

尝试添加display:-webkit-flex
供应商前缀 css 属性应该写在标准 css 属性之上。
如果您每天都在编写 CSS，Autoprefixer 是必不可少的（带有 Browserslist 配置）。您不必关心这些前缀，也不会能够忘记一个（或添加一个不必要的或从未存在的），以非功能顺序编写，必须删除当您不支持某些（现在）旧浏览器等时手动需要一些工具，但有这么多开发人员使用它的原因^^

标签： javascript html css safari flexbox

【解决方案1】：

试试这种风格display:-webkit-flex

类似地，所有浏览器都使用下面的 css

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 */

你的代码

.rq-search-container {

 position: relative;
 width: 100%;
 background: #fff; 
 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 */
 flex-direction: row; 
 align-items: flex-start;
 border-radius: 2px; 
 /*box-shadow: 0px 0px 28px 5px rgba(0, 0, 0, 0.3); margin-top: 45px;*/ 
 z-index: 30;

}

【讨论】：

嗨 Dinesh，我试过这段代码，但没有得到反映！
你能发布更新的样式吗？ @PrasannaRaja
位置：相对；宽度：100%；背景：#fff;显示：弯曲；弹性方向：行；对齐项目：弹性开始；边框半径：2px； z 指数：30； -webkit-显示：弹性； -webkit-flex-direction：行； -webkit-align-items: 弹性开始；
太棒了！，它的工作！谢谢兄弟！....
@PrasannaRaja 很高兴为您提供帮助