Jump to content
  • Sign Up
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

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
Reply to this topic...

×   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.

Sign in to follow this  

  • Similar Content

    • By prank
      Здравствуйте возникла проблема: http://prntscr.com/t96dcc (parallax) его высота смещает блок с текстом. Может подскажите другую рамку с текстом или как исправить это. 
      Параллакс: 
      <section class="parallax sticky" id="scene"> <div class="parallax-L" data-depth="0.3" id="L"><img src="img/bmw-m32.png" alt="" /></div> #L { width: 100%; height: 50vh; padding: 0; margin: 0; } .L { background: url(bmw-m32.jpg) left no-repeat; background-size: cover; overflow: hidden; } img { max-width: 20%; height: auto; } .sticky{ position: sticky; top: 0; } Рамка с текстом:
      <div class="ramka-5"> Рамка 5 </div> .ramka-5 { width: 4000px; position: relative; z-index: 2; background-color: white; width: 50%; margin: 0 auto; padding: 25px; border-right: 1px solid #333; border-left: 1px solid #333; border-radius: 10px; display: flex;     align-items: center;     justify-content: center;       font-size: 24px;     font-family: 'Roboto Condensed', sans-serif; }  
    • By konoplev_ps
      Добрый день.
      Проблема: Настраиваю в отдельном CSS стили для шрифтов h1, h2 и т.д., но когда начинаю их применять внутри тега div - не вижу изменений. Сам CSS подключил, в нем и другие настройки стилей, которые успешно применяются к файлу html.
  • Member Statistics

    46,873
    Total Members
    1,451
    Most Online
    riyasteve
    Newest Member
    riyasteve
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...