Safari中Flex属性无法正常工作

Question

我将使用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，IE Edge和此处的fiddle中运行良好，但在Safari中不起作用。

在Safari中，搜索栏位于.brandname元素上方，并向右侧延伸，宽度为150px。

有没有关于如何在Safari中使其工作的想法？

一个不起作用的事情是第一个flex行的100％宽度。在Safari中，它使两个flex-row元素紧挨着彼此，并共同占据100％的宽度。

- user3494047

---

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

Yosemite和Safari版本10.0.1 - user3494047

请查看此链接，可能会有所帮助 - https://css-tricks.com/using-flexbox/ - pradeep1991singh

Flexbox代码在除Safari之外的所有浏览器上都可以工作。为什么？ - Michael Benjamin

我认为这解决了问题 https://dev59.com/z10a5IYBdhLWcg3wva56 - user3494047

Answer 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的第一个子元素的CSS规则更改为：

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

然后它就可以工作了。

我在阅读this的Stack Overflow问题后考虑这样做，该问题指出在Safari中设置flex-wrap存在错误。

- user3494047

Answer 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;
}

对于所有其他规则都是类似的。

- Johannes