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，即edge和this小提琴，但不适用于safari。

在Safari中，搜索栏位于.brandname元素之上及其右侧，宽度为150px。

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

一件不起作用的是第一个100％的弹性行宽度不起作用。在safari中，它使两个felx-row元素彼此相邻，并且它们两者一起占据宽度的100％。

Answer 1

始终在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;
}

类似于所有其他规则。

Answer 2

我将.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的问候中看到flex-wrap是错误的时候想到这样做了这个问题表明在safari中设置flex-wrap是错误的

flex属性不适用于safari

2 个答案: