Я объясню для обывателей.
Казалось бы, есть CSS - штука, в которой описывают как будет выглядеть веб страница. И логично, что в 2016 году такая штука должна уметь.. ну хотя бы выравнивать элементы по горизонтали и вертикали относительно места, в котором она находится.
Но оно не умеет. По крайней мере напрямую, вот так написав одно правило. А vertical-align из комикса - выравнивает блок по вертикали, но не относительно места где он находится, а относительно других блоков, стоящих с ним в одну линию. Я взорву вам еще мозг - если блок это ячейка таблицы, то тогда она не выравнивает себя относительно соседей, а выравнивает свое содержимое по центру. Вот от этго диссонанса, костылей и ебли и разочаровываются в CSS и в профессии верстальщика в целом.
Ну и собственно, чтобы выровнять содержимое по вертикали, есть минимум 5 костыльных способов, один охуительнее другого, и каждый совершенно не очевиден.
Стандарты и браузеры пишут люди, очень далекие от простых бизнесов, обывателей, журналистов и художников. Они воспринимают веб как нечто газетное - где не должно быть абсолютно расположенных элементов. Все элементы с их точки зрения должны идти один за других, в потоке. Ну и веб с их точки зрения это не игрушка, где можно играть с шрифтами и центрировать блоки.
Еще один суицид :D
Ниже дважды говорили про flex, и дважды ответили что эта хуета не держит в IE9-10-11, а polyfill на js еще и требует прописывать flex атрибуты в html, Карл. Так что ты все равно будешь верстать на display table и table-cell, если хочешь дать заказчику семантически чистый html и кроссбраузерный css, и чтобы без полифилов под IE11, ибо это тоже современный браузер, хоть и говно. Ну а иначе ты просто кодер-верстак, который верстает хуяк хуяк и в продакшн, обмазанный кучей полифилов, data-font-size в атрибутах и прочих стилях прямо в html.
На 11 IE flex работает. Иди учи матчасть. Я в рот ебал и table и talbe-cell, и таких вот знатоков.
Вот тебе страница сделанная мной полностью на флексах. В ней нет ни одного inline, inline-block, table и прочей древней хуйты. Полифилов нет. Inline тегов нет. Ты точно за это деньги получаешь? Мне кажется зря. http://prntscr.com/csyoa1 Вот тебе скрин рядом с 11.
Ты бы внимательно глянул, что твой can i use показывает Node.compareDocumentPosition(), а не Flexible Box Layout Module. Хотя бы гугли правильно: http://caniuse.com/#feat=flexbox
Пригладываю картинку с правильными данными.
Салатовый, пункт 4, читаем внимательно внимательно:
Partial support is due to large amount of bugs present (see known issues)
Частичная поддержка, связанная с большими багами в отображении, Карл.
То есть, оно конечно может отобразиться правильно, а может и не отобразиться.
И кто из нас зря получает деньги?
Ну и ссылку на сайт на flex без полифиллов, рабочий в 11 - вы не приложили, жду. Не сомневаюсь, что он возможно показывает все корректно, но повторюсь - потому что вам повезло, и баги не всплыли.
http://prntscr.com/ct7s0i - линк на то, где много флексов с задачей сделать эти карточки одинаковыми с любым контентом по высоте. Вот линк - http://unexpected.biennale.info/.
C IE11 я не говорил, что легко и проблем нет. По факту, ты сказал что IE11 не поддерживается, и это ложь. Поддержка есть. Писать стили нужно с четким пониманием, что можно, что нельзя. Удача здесь непричем. Возможностей у flex на порядок больше, и писать на нем чище и быстрее.
table нужен реально для таблиц.
Хочешь лол? Вот эта таблица на caniuse тоже сделана на flex.
Я написал "эта хуета не держит в IE9-10-11". В 11-ом поддержка частичная.
Можно узнать, каких таких возможностей у подмножества flex, поддерживающимся в IE 10, больше чем у table-cell?
Почему то с display: table-cell я пишу одну эту строчку, и все работает заебись, все чисто, легко поддерживать и работает во всех браузерах вплоть до IE9.
И все что вы пишите конечно очень замечательно, и мы все перейдем на flex через пару лет, но пока еще IE9 стоит поддерживать, и я не вижу смысла писать код одновременно на display: table-cell и на flex. Надо писать на чем то одном. Очень рад что вашим заказчикам плевать на IE 9, Android UC Browser и что они делают вашу работу такой простой и замечательной.
Я вообще не страдаю, у меня scss с миксинами row, coll, fluid-col, в которых прописаны table и table-cell, верстка дивная. В какой-то момент я просто перепишу миксины на flex, и все автоматически станет на флексах, когда придет время :)
Можно я попробую угадать один из способов? Выровнять пустой элемент в самом начале, а затем все нужные элементы выравнивать по цепочке относительно него?
А относительно чего мы его выровняем? Да и нет у нас по сути лишних элементов. Если речь о выравнивании по высоте, то это означает что высота внешнего (родительского блока, рамки) уже задана, то есть не зависит от контента.
Вот вам несколько способов, вечер интересных историй начался, поехали:
1) Попробуем сделать line-height во всю высоту блока, и таки поставим внутри vertical-align: middle. А блок внутри сделаем inline-block.
line-height - ширина строки с буквами, vertical-align - выравнивание по середине строки с буквами, inline-block говори вести себя элементу как слову или букве, то есть быть в линию.
2) Самый здравый. display: absolute; top: 50%; transform: translateY(-50%);
позиционирование - абсолютное. В этом случае внешний блок не может брать размеры от контента (высота и так не от контента, помните?) - но, прощай автоматическая ширина, теперь мы должны задавать ширину родителю явно. top 50% - сдвигает контент до середины, выглядит так, что первая половина квадрата пустая, а во второй половине наш контент, начинающийся ровно от середины. Не совсем то что мы хотели, но на то он и top, чтобы работать относительно размера родителя. Дальше transform translateY - вот эта магия уже как раз двигает относительно своих размеров контента, и мы сдвигаем его на половину вверх от самого себя. И вуаля, все выглядит как надо.
3) Родителю - display: table-cell. Хардкор, теперь родительский блок как будто бы ячейка таблицы. Этому же родителю добавляем vertical-align: middle. И он выравнивает контент по вертикали, да и еще ширину может сам от контента брать. Мой любимый способ после способа 2.
4) Популярный способ в нулевых. Надо добавить еще один блок вокруг всего нашего блока. У нас будет Блок A, в нем блок B, а в нем контент C. Блоку A говорим top 50%, а контенту говорим top: -50%. Причем высоту надо задать A, а блок B должен взять высоту относительно контента, тогда top: -50% внутри него сработает аля transform. Ну понимаете, когда transform еще не было..
5) Суперхак. контенту делаем position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
WAT говорит браузер, ты хочешь чтобы элемент был впритык ко всем краям, но говоришь что margin (отступы) должны быть автоматическими.. пожалуй я сам рассчитаю ему одинаковые отступы со всех сторон, чтобы блок был по центру. Бинго, браузер, я тебя наебал. Опять же, absolute, внешний блок не может взять ширину от контента, и ее надо ставить самому.
Это способы, когда мы ничего не знаем заранее о высоте контента (читай, она может быть любая). Если же высота контента заранее известна, количество способов резко вырастает, а их оригинальность коррелирует с количеством. В этом случае вход могут пойти заранее рассчитанные координаты left и top, игры с отрицательными отступами margin (а подвинем мы контент на margin: -50px, он ведь 100px, по центру и встанет) и т.д. и т.п.
Спасибо за внимание, уебищные представления окончены. Надеюсь вы пожалели время и средства.
в css нельзя взять и одним правилом сделать выравнивание по вертикали.
правило vertical-align слегка не очевидно выравнивает и относительно других блоков в том же контейнере, а не относительно самого контейнера (распространенная ошибка 99% процента новичков)
Который нихуя не работает в IE9-10-11
Но есть js polyfill. Который, ебать, требует указания flex атрибутов в html. Который блять, должен быть семантически чистым и не знать ничего про flex и css.
Шел 2016 год, верстальщики так и не научились верстать кроссбраузерно через display: table, table-cell, translateY(-50%) c position absolute и vertical-align: middle внутри table.
Нет блять) Новичку дали совет, который выглядит правильно (vertical-align - ну должно же по вертикали выровнять, ну), и пока новичок не открыл браузер, быстро свалили. А оно нихуя вообще так не работает и новичок остался с тем чем был, и еще и ощущением что его наебал и коллега, и сам браузер.
Если уже есть fallback с table-cell, который работает идентично (а верстать не идентично с ИЕ11 для заказчика было бы странно), то нахуй тогда нужен flex?
css сплошной хак, я тут под винду на wpf писал так там вёрстка в разы проще, конечно там других проблем достаточно, но всё равно не понятно почему нельзя взять и сделать новую версию так чтоб было хорошо. выкинуть лишние элементы, а оставшиеся долепить до нормального состояния
Обратная совместимость. Веб это тебе не приложение обновить. Браузер обязан корректно отображать сайты, написанные на css2 и так далее (2000-ые). Ну и строго говоря, браузеры могли по сговору все исправить, и сделать заебись, но они ничего не решают, решает W3C комитет по стандартизации, который обкурен по самые гланды.
Херня, нет вертикального выравнивания в блоке, только если этот блок представляет табличный элемент table-cell или выравнивание группы инлайн блоков относительно друг друга, но параграф в блоке ХУЙ выровняешь через vertical-align
ET SP№r{J.
п*Ы1Т1^0С0РАТ*£ QUAEPlTI^,rT0 COPICEM
в»?
\\( И как тебе удается (находить эти недоку I ументированные АР1
За это мне и платят ^большие деньги..
CommitStrip.com
ТАК, ЧТО ТАМ У НАС ТВОРИТСЯ В ЗАХВАТЫВАЮЩЕМ МИРЕ ВЕБ-КОМИКСОВ?..
£91
^ С. У Д
и у \ /1 /
ОЛИН ЧЕЛОВЕК
РОПСЕНШТИЛЬС/
Я, КАЖЕТСЯ, ПОЗНАЛ ТЩЕТУ БЫТИЯ.
ПИСТОЛЕТ В СЛИВНОМ _БАЧКЕ.
Казалось бы, есть CSS - штука, в которой описывают как будет выглядеть веб страница. И логично, что в 2016 году такая штука должна уметь.. ну хотя бы выравнивать элементы по горизонтали и вертикали относительно места, в котором она находится.
Но оно не умеет. По крайней мере напрямую, вот так написав одно правило. А vertical-align из комикса - выравнивает блок по вертикали, но не относительно места где он находится, а относительно других блоков, стоящих с ним в одну линию. Я взорву вам еще мозг - если блок это ячейка таблицы, то тогда она не выравнивает себя относительно соседей, а выравнивает свое содержимое по центру. Вот от этго диссонанса, костылей и ебли и разочаровываются в CSS и в профессии верстальщика в целом.
Ну и собственно, чтобы выровнять содержимое по вертикали, есть минимум 5 костыльных способов, один охуительнее другого, и каждый совершенно не очевиден.
Ниже дважды говорили про flex, и дважды ответили что эта хуета не держит в IE9-10-11, а polyfill на js еще и требует прописывать flex атрибуты в html, Карл. Так что ты все равно будешь верстать на display table и table-cell, если хочешь дать заказчику семантически чистый html и кроссбраузерный css, и чтобы без полифилов под IE11, ибо это тоже современный браузер, хоть и говно. Ну а иначе ты просто кодер-верстак, который верстает хуяк хуяк и в продакшн, обмазанный кучей полифилов, data-font-size в атрибутах и прочих стилях прямо в html.
Вот тебе страница сделанная мной полностью на флексах. В ней нет ни одного inline, inline-block, table и прочей древней хуйты. Полифилов нет. Inline тегов нет. Ты точно за это деньги получаешь? Мне кажется зря.
http://prntscr.com/csyoa1 Вот тебе скрин рядом с 11.
Реального трафика IE&EDGE в проекте
Пригладываю картинку с правильными данными.
Салатовый, пункт 4, читаем внимательно внимательно:
Partial support is due to large amount of bugs present (see known issues)
Частичная поддержка, связанная с большими багами в отображении, Карл.
То есть, оно конечно может отобразиться правильно, а может и не отобразиться.
И кто из нас зря получает деньги?
Ну и ссылку на сайт на flex без полифиллов, рабочий в 11 - вы не приложили, жду. Не сомневаюсь, что он возможно показывает все корректно, но повторюсь - потому что вам повезло, и баги не всплыли.
C IE11 я не говорил, что легко и проблем нет. По факту, ты сказал что IE11 не поддерживается, и это ложь. Поддержка есть. Писать стили нужно с четким пониманием, что можно, что нельзя. Удача здесь непричем. Возможностей у flex на порядок больше, и писать на нем чище и быстрее.
table нужен реально для таблиц.
Хочешь лол? Вот эта таблица на caniuse тоже сделана на flex.
Можно узнать, каких таких возможностей у подмножества flex, поддерживающимся в IE 10, больше чем у table-cell?
Почему то с display: table-cell я пишу одну эту строчку, и все работает заебись, все чисто, легко поддерживать и работает во всех браузерах вплоть до IE9.
И все что вы пишите конечно очень замечательно, и мы все перейдем на flex через пару лет, но пока еще IE9 стоит поддерживать, и я не вижу смысла писать код одновременно на display: table-cell и на flex. Надо писать на чем то одном. Очень рад что вашим заказчикам плевать на IE 9, Android UC Browser и что они делают вашу работу такой простой и замечательной.
Вот вам несколько способов, вечер интересных историй начался, поехали:
1) Попробуем сделать line-height во всю высоту блока, и таки поставим внутри vertical-align: middle. А блок внутри сделаем inline-block.
line-height - ширина строки с буквами, vertical-align - выравнивание по середине строки с буквами, inline-block говори вести себя элементу как слову или букве, то есть быть в линию.
2) Самый здравый. display: absolute; top: 50%; transform: translateY(-50%);
позиционирование - абсолютное. В этом случае внешний блок не может брать размеры от контента (высота и так не от контента, помните?) - но, прощай автоматическая ширина, теперь мы должны задавать ширину родителю явно. top 50% - сдвигает контент до середины, выглядит так, что первая половина квадрата пустая, а во второй половине наш контент, начинающийся ровно от середины. Не совсем то что мы хотели, но на то он и top, чтобы работать относительно размера родителя. Дальше transform translateY - вот эта магия уже как раз двигает относительно своих размеров контента, и мы сдвигаем его на половину вверх от самого себя. И вуаля, все выглядит как надо.
3) Родителю - display: table-cell. Хардкор, теперь родительский блок как будто бы ячейка таблицы. Этому же родителю добавляем vertical-align: middle. И он выравнивает контент по вертикали, да и еще ширину может сам от контента брать. Мой любимый способ после способа 2.
4) Популярный способ в нулевых. Надо добавить еще один блок вокруг всего нашего блока. У нас будет Блок A, в нем блок B, а в нем контент C. Блоку A говорим top 50%, а контенту говорим top: -50%. Причем высоту надо задать A, а блок B должен взять высоту относительно контента, тогда top: -50% внутри него сработает аля transform. Ну понимаете, когда transform еще не было..
5) Суперхак. контенту делаем position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
WAT говорит браузер, ты хочешь чтобы элемент был впритык ко всем краям, но говоришь что margin (отступы) должны быть автоматическими.. пожалуй я сам рассчитаю ему одинаковые отступы со всех сторон, чтобы блок был по центру. Бинго, браузер, я тебя наебал. Опять же, absolute, внешний блок не может взять ширину от контента, и ее надо ставить самому.
Это способы, когда мы ничего не знаем заранее о высоте контента (читай, она может быть любая). Если же высота контента заранее известна, количество способов резко вырастает, а их оригинальность коррелирует с количеством. В этом случае вход могут пойти заранее рассчитанные координаты left и top, игры с отрицательными отступами margin (а подвинем мы контент на margin: -50px, он ведь 100px, по центру и встанет) и т.д. и т.п.
Спасибо за внимание, уебищные представления окончены. Надеюсь вы пожалели время и средства.
а в целом flex рулит
С параграфом внутри дива без шаманства с display:table-cell работать не будет.
правило vertical-align слегка не очевидно выравнивает и относительно других блоков в том же контейнере, а не относительно самого контейнера (распространенная ошибка 99% процента новичков)
Но есть js polyfill. Который, ебать, требует указания flex атрибутов в html. Который блять, должен быть семантически чистым и не знать ничего про flex и css.
Шел 2016 год, верстальщики так и не научились верстать кроссбраузерно через display: table, table-cell, translateY(-50%) c position absolute и vertical-align: middle внутри table.
Говна не держим, равнение на Edge & Safari.
Но как то раз его девушка позвала программиста переустановить ей винду. Теперь он мстит всем программистам как может.