2016-11-22 4 views
3

Я использую 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 панель поиска проходит над элементом .brandname и справа от нее и занимает ширину 150 пикселей.

любые идеи о том, как сделать эту работу в сафари?

Одна вещь, которая не работает, - это первая гибкая строка ширины 100% не работает. В сафари это делает два элемента felx-row рядом друг с другом, и оба они вместе принимают 100% ширины.

+0

Какой версии Safari и какой ОС? –

+0

Yosemite и сафари версии 10.0.1 – user3494047

+0

См. Это может любая помощь - https://css-tricks.com/using-flexbox/ – pradeep1991singh

ответ

0

Я изменил правила CSS .flex однорядные к:

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

, а затем он работает.

Я думал об этом после прочтения, что прогибается-обертывание глючит в сафари от this SO вопроса, который предполагает, что установка Flex-обертки в сафари глючит

0

Всегда используйте настройку без префикса в соответствии с вашими правилами 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; 
} 

похоже на все другие правила.

 Смежные вопросы

  • Нет связанных вопросов^_^