flex 属性在 safari 上不起作用

Posted 2023-03-05

【中文标题】flex 属性在 safari 上不起作用

【英文标题】：flex properties not working on safari

【发布时间】：2017-04-06 10:47:54

【问题描述】：

我正在使用 flex 使搜索栏/输入元素保持居中并随着屏幕大小的变化而改变宽度。

这是我的html：

<div class="flex-container">
    <div class="flex-row">
        <h1 class="brandname">Hello</h1>
    </div>
    <div class="flex-row">
        <form>
            <!-- <div class="search centered"> -->
            <div class="search">
                <div class="input-container">
                    <input type="text" name="query" class="searchbar" />
                    <button type="submit" class="search-button">Search</button>
                </div>
            </div>

        </form>
    </div>
</div>

这是我的 CSS：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.flex-container
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;



.flex-row 
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex: 1;
    -webkit-flex: 1;


form
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex: 1;
    -webkit-flex: 1;


.search
    display: flex;
    display: -webkit-flex;
    flex: 0 1 455px;
    -webkit-flex: 0 1 455px;


.input-container
    display: flex;
    display: -webkit-flex;
    flex: 1;
    -webkit-flex: 1;
    min-width: 0;


.searchbar
    flex: 1;
    -webkit-flex: 1;
    min-width: 0;



.flex-container > .flex-row:first-child
    flex: 0 1 100%;
    -webkit-flex: 0 1 100%;


.brandname 
  position: relative;
  font-size: 500%;
  font-family: 'Lato', sans-serif;
  color: #1f0e3e;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 5%;

body 
    margin: 10px;


.input-container
    /*float: left;*/
    /*display: block;*/
    flex: 1;
    -webkit-flex: 1;
    outline-style: solid;
    outline-color: #e3e3e3;
    outline-width: 1px;


.searchbar
    margin-left: 5px;


.search button 
    background-color: rgba(152,111,165,0.38);
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    border-radius: 0px;
    /*overflow: hidden;*/
    outline-width: 1px;
    outline-style: solid;
    outline-color: #e3e3e3;
    color: white;


.search input
    outline-width: 0px;
outline-style: none;
border-width: 0px;

它适用于 chrome，即 edge 和 this fiddle，但不适用于 safari。

在 Safari 中，搜索栏位于 .brandname 元素上方和右侧，宽度为 150 像素。

关于如何在 safari 中进行这项工作的任何想法？

不工作的一件事是第一个 100% 的 flex 行宽度不工作。在 safari 中，它使两个 felx-row 元素彼此相邻，并且它们一起占据了 100% 的宽度。

【问题讨论】：

哪个版本的 Safari 和什么操作系统？

优胜美地和野生动物园版本 10.0.1

看看这个有什么帮助 - css-tricks.com/using-flexbox

可能的指导：Flexbox code working on all browsers except Safari. Why?

我认为这解决了它***.com/questions/29986668/…

【参考方案1】：

我将 .flex-row css 规则更改为：

.flex-row 
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex: 1;
    -webkit-flex: 0 1 100%;

并将 flex-row first child css 规则更改为：

.flex-container > .flex-row:first-child
    flex: 0 1 100%;
    -webkit-flex: 0 1 auto;

然后它就起作用了。

在阅读了 this SO question 中的 flex-wrap is buggy in safari 之后，我想到了这样做，这表明在 safari 中设置 flex-wrap 是错误的

【参考方案2】：

始终在您的 CSS 规则中最后使用非前缀设置。在您的第一条规则中：

.flex-container
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

所有其他规则类似。