Jump to content
  • 0

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


Nikita_Barinov
 Share

Question

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

Ребят, создавал тут тему недавно насчет одинаковой высоты у блоков, добрый человек посоветовал использовать 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;}

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

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

Какие-то у вас хреновые флексы. Зачем так к примеру 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
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

Черновик.  

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

Link to comment
Share on other sites

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

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

 

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

Link to comment
Share on other sites

  • 0

 

У меня возник другой вопрос, может кто знает - значения свойства 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. Но на деле может быть все что угодно.

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

Link to comment
Share on other sites

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

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

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

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

 

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

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

Link to comment
Share on other sites

  • 0

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

 

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> будет инлайном.

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

 

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

Я думала, что если задать контейнеру - 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
Link to comment
Share on other sites

  • 0

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

 

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

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

Link to comment
Share on other sites

  • 0

Вот тут говорится по другому, что влияет на отображение контента внутри флекс-итемов 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-

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

 

 

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

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

Edited by amelice
  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy