Я решил учить flexbox.

[DivMan]

Я написал новое правило "flex-direction: column;"

получается, то, что перевернул главную ось и потом добавил ещё одно правило "justify-content: center;"

По моей логике, блок "my-flex-container" должен выравняться по середине высоты дисплея, не зависимо 

от разрешения. Почему он выравнивается, только тогда, если задать высоту?

 

http://jsfiddle.net/c7c3L4zw/

 

Ведь, он же как-то выравнивается по ширине, если она не задана, почему тогда не выравнивается по высоте?

[Jack_V]

Свойство "justify-content: center;" применяется к детям контейнера. И оси работают только в пределах контейнера, который "display:flex".

 

Так должно было быть?

Edited June 7, 2015 by Jack_V

[SelenIT]

он же как-то выравнивается по ширине, если она не задана, почему тогда не выравнивается по высоте?

Потому что ширина, когда она не задана, определяется как доступная ширина родителя минус марджины-бордеры-паддинги (для флекс-контейнеров она определяется так же, как для блоков). А высота, если она не задана, определяется исключительно по содержимому.

[Николя223]

Потому что ширина, когда она не задана, определяется как доступная ширина родителя минус марджины-бордеры-паддинги (для флекс-контейнеров она определяется так же, как для блоков). А высота, если она не задана, определяется исключительно по содержимому.

А можно у вас узнать - верстка флексами сейчас пользуется вообще спросом и популярностью?  просто до сих пор верстаю по старинке(((  не видел случая когда необходимо было бы использовать флексы.... можете пример привести такой))) в целях повышения квалификации... ну и интереса ради       

[lexxcode]

А можно у вас узнать - верстка флексами сейчас пользуется вообще спросом и популярностью?  просто до сих пор верстаю по старинке(((  не видел случая когда необходимо было бы использовать флексы.... можете пример привести такой))) в целях повышения квалификации... ну и интереса ради       

 

Не то чтобы пользуется спросом, пока что. Но уже давно пора. Я в частности всячески призываю переходить на флекс, ибо это очень вкусно, круто-модно-молодежно, если хотите.

 

Что касается примеров, то ты все можешь верстать на флексах. Я серьезно. Начиная с базового скелета, заканчивая всяческими тулбарами, менюшками, сетками. Это реально удобно, просто нужно разок попробовать вникнуть что к чему, и потом за уши не оторвешь. Будешь смотреть на методы прошлого поколения, как на что-то доисторическое и отсталое Статьи по этому делу есть, так что просто попробуй)

 

Я уже всем надоел своей статьей, наверное, но тем не менее http://habrahabr.ru/post/242545/

Есть довольно жизненные примеры. И это только малый процент что можно сотворить

[SelenIT]

По моим наблюдениям, очень даже пользуется. Поддержка браузерами вплотную приближается к 95% (даже Опера Мини после обновления движка на сервере стала поддерживать!). Ведущие фреймворки переходят на flex по умолчанию для сеток. Не нужны хаки типа клирфиксов (как с float-ами), борьбы с пробелами (как с инлайн-блоками), возможностей больше, чем у таблиц (за редкими исключениями), а в Blink флексбоксы (стандартный, новый вариант) и рендерятся быстрее таблиц. Ну и просто мода в какой-то мере

[lexxcode]

Так должно было быть?

 

 

Лучше так сделать http://jsfiddle.net/alexriz/9fg6fLxq/это будет более гибкое решение

за редкими исключениями

Что-то я в упор не понял в чем проблема, и что хотел получить автор 

[SelenIT]

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

[lexxcode]

Ааа я понял. Ну да, так просто не получится. Но с другой стороны, тут явно таблица просится, так что дело такое. Фанатеть  без предела тоже не стоит, а то получится как с флоатами)  

[Николя223]

Не то чтобы пользуется спросом, пока что. Но уже давно пора. Я в частности всячески призываю переходить на флекс, ибо это очень вкусно, круто-модно-молодежно, если хотите.

 

Просто я больше на бэкэнде... по верстке мало заморачиваюсь чем то новым, только если какая то необходимость.... ну если всё можно на флексах сверстать, как нибудь рискну проделать такой эксперимент))

 

SelenIT, thanks ))

[Jack_V]

Кстати, когда-то наткнулся на старенькую статью, где отмечалось, что flexbox модуль лучше применять к небольшим элементам, а к крупным grid layout. Все знают в каком положении сейчас grid, но вопрос: что же все-таки не так с "flaxbox для крупных элементов"?

Edited June 8, 2015 by Jack_V

[SelenIT]

Если речь про эту статью, то имхо к ней особо серьезно относиться не стоит, пример в ней всё-таки достаточно искусственный.

 

Если про эту, то тут уже серьезнее: любая система раскладки, где одни блоки зависят от других — потенциальная проблема скорости отрисовки из-за необходимости перерисоывать большую площадь. Поэтому в среднем флексбоксы оказываются чуть медленнее таблиц (хотя Пол Айриш уверял, что в Blink новые флексбоксы чуть быстрее их), а в мобильном Сафари я лично сталкивался с тем, что глобальные флексбоксы ощутимо подгружали и без того сложную страницу (вплоть до того, что с ними она на первом мини-айпаде вылетала, а без них — нет). Может, из-за этого в Сафари и не торопятся убирать экспериментальный префикс...

[lexxcode]

Может, из-за этого в Сафари и не торопятся убирать экспериментальный префикс...

В сафари там местами печальбеда случается, не то чтобы это было сильно критично, но все же ошибки расчетов блоков случаются

 

Меня больше IE накаляет. С начала казалось, что он лучше всех работает с flexbox. Но при более глубоком изучении оказалось что там просто баг на баге. Обойти конечно тоже можно, но тем не менее. IE как всегда кусок г****. 

[SelenIT]

Ошибки расчета/округления случаются и в Хроме, увы. Вот, не далее как на той неделе...

[lexxcode]

Ошибки расчета/округления случаются и в Хроме, увы. Вот, не далее как на той неделе...

Не, я не об этом. Я о другом баге именно в сафари. в Хроме как раз все как положено

Вот пример:

(Full Screen)  https://jsfiddle.net/alexriz/qgmv8wta/embedded/result/

(Code) http://jsfiddle.net/alexriz/qgmv8wta/

 

[SelenIT]

Может, там тоже артефакт более старой версии спецификации (ширина дочернего элемента рассчитывается как для блока, а не по содержимому)?

[lexxcode]

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

[SelenIT]

Вот стоило пожаловаться, как вышлел 9-й Сафари с беспрефиксными флексбоксами (а заодно анимациями и CSS-колонками)

[DivMan]

Выровнял блок по центру, это нормальное решение?

https://jsfiddle.net/yLtssn0c/

[Igor Schnaider]

Да. Я б сократил :-)

[DivMan]

Только что, Igor Schnaider сказал:

Да. Я б сократил :-)

Твоим способ получается прокрутка 

[Igor Schnaider]

А, ну да.
margin: 0;

 

UPD
Кстати, вопрос: а почему с min-height на html нет прокрутки, а с height есть?

Edited April 19, 2016 by Igor Schnaider

[Launder]

@DivMan, лично мне, более-менее понять, как работает эта раскладка помогла вот эта статья и этот нехитрый тренажёр.

[Igor Schnaider]

3 часа назад, Igor Schnaider сказал:

UPD
Кстати, вопрос: а почему с min-height на html нет прокрутки, а с height есть?

Блин, что-то я туплю сегодня. Думал, height 100% на body работает с min-height на html...