flex Eigenschaften funktioniert nicht auf Safari

Question

Ich benutze Flex für eine Suchleiste/Eingabe Element bleiben zentriert und ändern Sie die Breite, wie die Bildschirmgröße ändert.

Das ist mein 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> 

und das ist mein 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; 
} 

und es funktioniert in Chrom, dh Rand und in this Geige, aber nicht in Safari.

In Safari geht die Suchleiste über das Element .brandname und rechts davon und nimmt eine Breite von 150px.

irgendwelche Ideen, wie man diese Arbeit in Safari machen kann?

Eine Sache, die nicht funktioniert, ist die erste Flex-Zeilenbreite von 100% funktioniert nicht. Bei der Safari werden die zwei felx-row Elemente nebeneinander platziert und beide zusammen nehmen 100% der Breite ein.

Answer 1

Ich änderte .flex-Reihe CSS-Regeln:

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

und änderte die Flex-Reihe ersten CSS-Regeln Kind:

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

und dann funktioniert es.

Ich dachte daran, dies zu tun nach der Lektüre, dass Flex-Wrap ist Buggy in Safari von this SO Frage, dass flex-wrap in Safari Einstellung schlägt

Answer 2

Verwenden Sie in Ihren CSS-Regeln immer die Einstellung ohne Präfix. In Ihrer ersten Regel wäre das:

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

ähnlich für alle anderen Regeln.