Sign in to follow this  
Nikita_Barinov

Проблемы с flex в Safari

Recommended Posts

Приветствую! 

Ребят, создавал тут тему недавно насчет одинаковой высоты у блоков, добрый человек посоветовал использовать flex и показал пример(спасибо ему огромное!). Воспользовался я его советом, все хорошо получилось, но такая красота получается только в Chrome, Firefox да Opera, а в Safari нифига. Вот как должно быть: 

 

e69de818f1d5.png

 

А вот как в Safari: 

 

1bde6fb8099c.png

 

Как видите, продолжение  background нет(высота фиксированная, хотя с flex должна была установится высота блока main) да и тени почему-то тоже нет(пропадает, когда увеличиваешь страницу).

Вот верстка:

<!DOCTYPE html><html lang="ru"><head>    <meta charset="UTF-8">    <title>{title}</title>    <link href="engine/templates/nn/tmp/css/style.css" rel="stylesheet">    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>    <script type="text/javascript" src="engine/templates/nn/tmp/js/hint.js"></script>    <script type="text/javascript">        if (!('flexWrap' in document.createElement('div').style)) {            document.documentElement.className += ' no-flex';        }    </script></head><body><div onclick="show('none')" id="wrap"></div><div id="wrapper">    <div id="left">{left}</div>    <div id="main">{main}</div>    <div id="right">{right}</div></div><footer>    <div class="footer_content">        {footer}    </div></footer></body></html>

Вот CSS:

#wrapper {    display: flex;    display: -webkit-flex;    flex-flow: row nowrap;    -webkit-flex-flow: row nowrap;     margin: 75px auto 16px;    width: 1120px;    background-color: #fff;    border-radius: 5px;    overflow: hidden;}.no-flex #wrapper {    display: table;    width: 100%;    max-width: 1122px;}.no-flex #left,.no-flex #right,.no-flex #main {    display: table-cell;    vertical-align: top;}#left {    width: 235px;    float: left;}#right {    width: 285px;    background-color: #f6f9fa;    float: right;    flex-shrink: 0;}#main {    width: 420px;    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);       -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);    float: left;    padding: 50px 90px;    position: relative;}

Буду благодарен за любую помощь!

Share this post


Link to post
Share on other sites

Какие-то у вас хреновые флексы. Зачем так к примеру float?

 

В документации флекса про флоат написано следующее:

float and clear have no effect on a flex item, and do not take it out-of-flow. However, the float property can still affect box generation by influencing the display property’s computed value.

 

Первое предложение понятно.

А вот со вторым не до конца понятно. Если правильно поняла, то написано - что флоат все еще влияет на генерацию бокса, тем самым влияя на свойство display в вычисляемых значениях.

 

Проверила в браузере, если задать float флекс-итему, то оно сбрасывается в none, а display зависит только от родителя.

а как на самом деле?

Edited by amelice

Share this post


Link to post
Share on other sites

В документации пишут о том, что если. к примеру, инлайн-элементу задать float, то он станет блочным. Но при этом он не выпадет из потока. Как оно на самом деле реализовано в браузерах хз. Я даже не знаю это уже рекомендация или ещё воркинг драфт (лень лезть в W3C искать)?

Share this post


Link to post
Share on other sites

Черновик.  

У меня возник другой вопрос, может кто знает - значения свойства display (flex или inline-flex) контейнера влияет только на его вместительность? Я заметила как не меняй это свойство, у итемов display: block. 

Share this post


Link to post
Share on other sites
У меня возник другой вопрос, может кто знает - значения свойства display (flex или inline-flex) контейнера влияет только на его вместительность? Я заметила как не меняй это свойство, у итемов display: block. 

Ну дочерние элементы становятся flex-item. Сам по себе display у флекситемов не меняется, как бы. flex-item'ом может стать и таблица, она станет гибкой, но свои внутренние свойства таблицы она не потеряет, то есть тот самый display: table; 

 

А что касается float и clear, то в документации написано, что, по идее, они не должены влиять на flex-item. Но на деле может быть все что угодно. Видимо это зависит от реализации всего этого добра в браузерах.

Share this post


Link to post
Share on other sites

 

У меня возник другой вопрос, может кто знает - значения свойства display (flex или inline-flex) контейнера влияет только на его вместительность? Я заметила как не меняй это свойство, у итемов display: block. 

Ну дочерние элементы становятся flex-item. Сам по себе display у флекситемов не меняется, как бы. flex-item'ом может стать и таблица, она станет гибкой, но свои внутренние свойства таблицы она не потеряет, то есть тот самый display: table;

Позволю себе не согласиться. Насколько я понимаю, если изменить display у ближайших потомков (а значит у flex-item'ов) flex-контейнера, то эти потомки всё равно останутся flex-элементами, и будут плясать по их правилам. Два разных контекста не могут ужиться вместе в CSS (по крайней мере на сегодняшний день). display: flex; перебьёт остальные контексты. Для наглядности я сделал тестовый пример, который, например, в фоксе и хроме отображается по разному, но, имхо, прав тут именно хром.

 

 

А что касается float и clear, то в документации написано, что, по идее, они не должены влиять на flex-item. Но на деле может быть все что угодно.

 Вот тут тоже чуть не согласен. Имхо, флексовый контекст в первую очередь предполагает то, что ты здесь описываешь, поэтому с реализацией в браузерах в этом плане точно не должно быть проблем.

Share this post


Link to post
Share on other sites
Позволю себе не согласиться. Насколько я понимаю, если изменить display у ближайших потомков (а значит у flex-item'ов) flex-контейнера, то эти потомки всё равно останутся flex-элементами, и будут плясать по их правилам. Два разных контекста не могут ужиться вместе в CSS (по крайней мере на сегодняшний день). display: flex; перебьёт остальные контексты. Для наглядности я сделал тестовый пример, который, например, в фоксе и хроме отображается по разному, но, имхо, прав тут именно хром.

Вообще-то ты сказал ровно то же самое что и я, только с другой точки зрения. Все верно, flex-элементы это flex-элементы, и да они взаимодействуют напрямую со своим ближайшим родителем flex-контейнером. Так оно и есть. Но с точки зрения flex-элемента, условно говоря, меняется его внешнее (наружнее) взаимодействие, с другими элементами в стаке. Но те элементы которые находятся внутри flex-элемента живут своей нормальной жизнью. Пример твой не подходит под то о чем я говорю.

Я имел ввиду примерно это http://jsfiddle.net/alexriz/4j6gk9bv/таблица не ломается, не смотря на то, что она является flex-элементом.

(Кстати, странное поведение, таблички не реагируют на flex-grow: 1;, а просто блоки нормально ведут себя)

 

Вот тут тоже чуть не согласен. Имхо, флексовый контекст в первую очередь предполагает то, что ты здесь описываешь, поэтому с реализацией в браузерах в этом плане точно не должно быть проблем.
 

Собственно это ведь не я придумал, так даже в документации написано. Ведь не мне тебе рассказывать, как иногда в браузерах реализуется тот или иной функционал. А учитывая довольно сложное поведение float, предположить возможное влияние на контекст флекса, вполне закономерно. Хотя бы из-за того что в браузере может быть банальная ошибка в работе этого добра.

Share this post


Link to post
Share on other sites

Значит, я пообщался с Ильёй и он объяснил мне некоторые моменты.

 

1. Что касается display:table (or display: table-cell) на дочерних элементах flex-контейнера:

https://code.google.com/p/chromium/issues/detail?id=243056
http://dev.w3.org/csswg/css-flexbox/#table-items
http://css-live.ru/articles/mysterious-css-anonymous-boxes.html
 

В общем, как видно по информации из ссылок, дело касается только display:table (or display: table-cell). Т.е. если непосредственным потомкам flex-контейнера (т.е. flex-элементам) выставить display:table (or display: table-cell), то flex-элементы окажутся в табличном контексте. Поэтому в моём вышеприведённом примере прав всё-таки фокс).

Да, float'ов это не касается*

2. Что касается вопроса Чинары.

Сразу объясню на примере. Допустим у нас есть flex-контейнер с дочерним элементом <span> (т.е. <span> в данном случае flex-элемент). У <span> есть дочерний элемент <i> с display:inherit. Если мы при этом выставляем <span>'у float: right/left, тогда его дочерний элемент <i> будет блоком. Если же мы не трогаем <span>, то <i> будет инлайном.

Но всё это только в теории, и нужно ещё проверять, и задавать вопросы самим спекоделам. :)
 

Share this post


Link to post
Share on other sites

Ребята спасибо за пояснения. 

 

Макс, мой вопрос звучал иначе, чем ты растолковал.

Я думала, что если задать контейнеру - inline-flex, то флекс-итемы должны вести себя как инлайны и соответственно поменяется display.

Но как бы не меняла свойство display контейнеру - flex или inline-flex, у флекс-итемов дисплей оставался block.  Стало интересно, на что тогда влияет inline-flex )

Прошлась по ссылкам, что ты привел и поняла что они останутся блочными . Там  написано, что если флекс-итем был инлайновым, то становится блочным. а если флекс-итем имеет display-cell, то формируется анонимный блок display: table  вокруг него - вот он и будет флекс-итемом.

Так что, наверно свойство контейнера inline-flex влияет на его вместительнось. 

 

По поводу display: inherit

http://codepen.io/amelice/pen/PqvZEG элемент .inner стал блочным, не смотря что у родителя (flex-item) display:inline.

Edited by amelice

Share this post


Link to post
Share on other sites

Разница между display: flex; и display: inline-flex;, только в их внешнем взаимодействии с другими элементами в потоке, аналогично display: block; и display: inline-block; соответственно. На вложенные элементы действие идентичное, при любом значении.

 

Для инициализации контейнера достаточно присвоить, через css, элементу display: flex; или display: inline-flex;. Разница между flex и inline-flex заключается лишь в принципе взаимодействия с окружающими контейнер элементами, подобно display: block; и display: inline-block;, соответственно. 

Я писал об этом в своей статье 

Share this post


Link to post
Share on other sites

Вот тут говорится по другому, что влияет на отображение контента внутри флекс-итемов http://css.yoksel.ru/flexbox/ 

Но и твой вариант тоже работает. http://codepen.io/amelice/pen/xGNZMv

Share this post


Link to post
Share on other sites

Вот тут говорится по другому, что влияет на отображение контента внутри флекс-итемов http://css.yoksel.ru/flexbox/ Но и твой вариант тоже работает. http://codepen.io/amelice/pen/xGNZMv

Какой-то там весьма  странный вывод сделан. Естественно оно так себя ведет, потому что оно аналогично вот такому примеру: 

http://jsfiddle.net/alexriz/2L5zzteb/

 

Это все из одной пьесы:

display: block; --- display: inline-block;

display: table; --- display: inline-table;

display: flex; --- display: inline-flex;

 

Контекст внутри создается одинаковый, что у простого свойства, что у свойства с префиксом inline-

Разница лишь в том, как сам контейнер будет вести себя в потоке

Share this post


Link to post
Share on other sites

Во-первых, пока вывод был не сделан. ) Я видела вариант с той статьи и твой вариант, но не успела толком проверить.

 

 

Во-вторых, в твоем примере для меня стало открытием поведение inline-block, который при малой ширине растягивается на всю ширину контента.

Отдельное спасибо за пример!   :)

Edited by amelice

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Nathman999
      В #topmenu есть 4 прямоугольника-ссылки:"Основное","HTML","CSS","Сайт"
      Ссылки выглядят примерно так: http://htmlbook.ru/#main 
      Хотя если на них нажать никаких переходов не происходит(по крайней мере в адресной строке хрома ничего не меняется).
      Но панель под этими прямоугольниками меняется. А именно одна из 4-х панелей становится видимой(display: block;).
      Объясните пожалуйста как реализована такая технология.
    • By AndreyCore
      При нажатии на кнопку в форме, сайт не перезагружается как нужно.
      В чем проблема?
      <div class ='div-form'> <h1>CALC</h1> <form id = 'myform'> <label for = 'inp-1'>Число 1</label> <input class = 'inp' id = 'inp-1' type ='text'></input> <br/><p></p> <label for = 'inp-2'>Число 2</label> <input class = 'inp' id = 'inp-2' type = "text"></input></form><br/> <input id = 'bu-end' type ='submit' value ="Суммировать"></input> <p class = 'sum' id = 'sum'>Сумма: <span class = 'sum-r' id = 'sum-r'></span></p> </form><hr/> </div>  
    • By ashelpakov95
      Помогите, делаю чат-бота по этому уроку и коду https://fokit.ru/kak-sozdat-chat-bota-besplatno/
       
      Есть 6 веток вопросов. Я всё удобно подписал <!--Вопрос 1-->,<!--Вопрос 2-->....
      У меня бот прогоняет все вопросы какие есть.  Как сделать, чтобы после каждой ветки вопросов бот прекращал задавать вопросы? и еще, как сделать, чтобы бот выдавал вариант ответа, при нажатии на который, перекидывало на определенную страницу сайта?
      index-22.html
  • Member Statistics

    46,551
    Total Members
    3,128
    Most Online
    Илья92
    Newest Member
    Илья92
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.