flex屬性無法在safari上工作

我使用flex來使搜索欄/輸入元素保持居中，並隨着屏幕大小的變化而改變寬度。flex屬性無法在safari上工作

這是我的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; 
}

，它工作在鉻，即邊緣和this小提琴，但不是在Safari瀏覽器。

在Safari中，搜索欄位於.brandname元素上方並位於其右側，寬度爲150像素。

關於如何使這項工作在safari的任何想法？

有一件不起作用的是100％的第一個flex行寬度不起作用。在safari中，它使兩個毛氈行元素彼此相鄰，並且它們一起佔據寬度的100％。

來源

2016-11-22 user3494047

哪個版本之後？ –

優勝美地和safari 10.0.1版本 – user3494047

看到這可以任何幫助 - https://css-tricks.com/using-flexbox/ – pradeep1991singh

我改變.flex行CSS規則：

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

，改變了柔性排第一個孩子的CSS規則：

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

，然後它的作品。

我想過做這個讀取柔性包裝是在Safari越野車從this SO質疑這表明在Safari中設置柔性包裝是越野車Safari和什麼操作系統的

來源

2016-11-22 19:31:56 user3494047

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

所有其他規則類似。

來源

2016-11-22 19:23:22 Johannes

flex屬性無法在safari上工作

回答

相關問題