Почти полное руководство по flexbox (без самих flexbox)

http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
  • Перевод
image

К сожалению, не у всех есть браузер/устройство, поддерживающие flexbox. Это руководство в виде шпаргалки, в котором предлагаются альтернативы обратной совместимости для свойств flexbox.

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



  1. flex-direction
  2. flex-wrap
  3. justify-content
  4. align-items
  5. align-content
  6. flex items


1. flex-direction



row



Отображает элементы горизонтально

.item {
	display: inline-block;
}


image
Ссылка на живой пример.

row-reverse



Отображает элементы горизонтально в обратном порядке

.container {
	direction: rtl;
}

.item {
	display: inline-block;
}


image
Ссылка на живой пример.

column



Отображает элементы вертикально

.item {
	display: block;
}


image

Ссылка на живой пример.

column-reverse



Отображает элементы вертикально в обратном порядке

.container, .item {
	transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
}

.item {
	display: block;
}


image
Ссылка на живой пример.

2. flex-wrap



nowrap



Сужает элементы для предотвращения переноса

.container {
	display: table;
}

.item {
	display: table-cell;
}


image

Ссылка на живой пример.

wrap



Переносит элементы на другую строку, когда их общая ширина больше ширины контейнера
.item {
	display: inline-block;
}

image
Ссылка на живой пример.



flex-start



Выравнивает элементы по горизонтали в начале контейнера

.item {
	display: inline-block;
}


image

Ссылка на живой пример.

flex-end



Выравнивает элементы по горизонтали в конце контейнера

.container {
	text-align: right;
}

.item {
	display: inline-block;
}

image

Ссылка на живой пример.


center


Выравнивает элементы по горизонтали по центру контейнера

.container {
	text-align: center;
}

.item {
	display: inline-block;
}


image

Ссылка на живой пример.

space-between



Распределяет равное пространство между элементами, заставляя крайние элементы прижаться к краям контейнера

.container {
	text-align: justify;
}

.container:after {
	content: '';
	display: inline-block;
	width: 100%;
}

.item {
	display: inline-block;
}


image

Ссылка на живой пример.

Примечание: этот метод работает только с несжатым HTML и требует фиксированную высоту у контейнера.


space-around



Равномеро распределяет пространство между элементами

.container {
	display: table;
}

.item {
	display: table-cell;
	text-align: center;
}


image

Ссылка на живой пример.

4. align-items



flex-start



Выравнивает элементы по вертикали в начале контейнера

.item {
	display: table-cell;
}


image
Ссылка на живой пример.

flex-end



Выравнивает элементы по вертикали в конце контейнера

.container {
	display: table;
}

.item {
	display: table-cell;
	vertical-align: bottom;
}

image
Ссылка на живой пример.

center


Выравнивает элементы по вертикали в центру контейнера

.container {
	display: table;
}

.item {
	display: table-cell;
	vertical-align: middle;
}


image

Ссылка на живой пример.

stretch



Растягивает элементы по вертикали от начала до конца контейнера

.item {
	display: inline-block;
	height: 100%;
}


image
Ссылка на живой пример.

5. align-content


flex-start



Выравнивает элементы по вертикали в начале контейнера

.item {
	display: inline-block;
}

image
Ссылка на живой пример.

flex-end


Выравнивает элементы по вертикали в конце контейнера

.container {
	display: table-cell;
	vertical-align: bottom;
}

.item {
	display: inline-block;
}


image

Ссылка на живой пример.

center


Выравнивает элементы по вертикали по центру контейнера
.container {
	display: table-cell;
	vertical-align: middle;
}

.item {
	display: inline-block;
}

image
Ссылка на живой пример.

6. flex items


flex-grow


Растягивает элемент, чтобы заполнить оставшееся пространство
.container {
	display: table;
}

.item {
	display: table-cell;
}

.item.grow {
	width: 100%;
}

image
Ссылка на живой пример.

flex-shrink


Сужает элемент, а другие элементы заполняют оставшееся пространство
.container {
	display: table;
}

.item {
	display: table-cell;
}

.item.shrink {
	width: 1px;
}

image

Ссылка на живой пример.

align-self


Выравнивает элемент по вертикали (внизу в этом примере)
.container {
	display: table;
}

.item {
	display: table-cell;
}

.item.bottom {
	vertical-align: bottom;
}

image
Ссылка на живой пример.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 59
  • +5

    Извращение какое-то.
    Во-первых только IE11 требует вендорные префиксы, все остальные браузеры поддерживают flexbox без префиксов.
    А во-вторых сравнивать flex-direction: row и display: inline-block совершенно нельзя, как и многие другие примеры.
    Не понимаю зачем это в 2016 году вообще...

      • +9

        Ну так прочитайте же что по ссылке написано.


        С префиксами поддерживаются:


        • Android 2.1+
        • iOS 3.2+
        • IE10+ (при том, что IE10- официально не поддерживаются)

        Ещё аргументы за костыли и против современных инструментов?

        • –5
          С префиксами поддерживаются

          Ну так там везде неполная поддержка даже с префиксами, нет враппинга, например. А против современных инструментов — это на десктопе можно сказать «фи» браузеру пользователя и заставить перейти на другой (или накостылить мегабайты шимов), на мобилках юзверь пользует то к чему привык, а часто вообще лишен права выбора.
          • +3

            Погодите, мы обсуждаем статью ведь? Вы хотите сказать, что примеры из статьи лучше отсутствия враппинга в некоторых древних браузеров? По-моему это граздо меньшая проблема, ибо примеры в статье это очень грубая аппроксимация, которая имеет по факту существенно отличное поведение от родного flexbox.


            Теперь по поводу мобилок:


            • iOS версия в подавляющем большинстве случаев последняя доступная для устройства, то есть проблема с устаревшим браузером не существует (7.1+ имеет поддержку актуальной спецификации с префиксом, а 7.1 поддерживают достаточно древние iPhone чтобы забить на ещё более древние)
            • На Android всё хуже, но на 4.3- стандартный браузер на столько ущербный, что многие пользователи пользуются альтернативными, где flexbox хоть и с префиксами, но точно поддерживаются (Opera, Chrome, UC Browser или как там его, для не очень старых Firefox), то есть не стоит преувеличивать проблему
            • +1
              мы обсуждаем статью ведь

              Нет, мы обсуждаем безаппеляционный комментарий «Извращение какое-то. Не понимаю зачем это в 2016 году вообще...».
              примеры в статье это очень грубая аппроксимация

              Какая никакая, но хоть что-то отдаленно похожее. Да, нужно подпиливать в каждом конкретном случае, но это хоть что-то.
              iOS версия в подавляющем большинстве случаев последняя доступная для устройства

              Если apple вернет возможность откатить версию, до какой версии откатится большинство пользователей? Подскажу — это будет 6-ка. Поэтому кто-то обновлялся не глядя, кто-то почитал интернеты и решил сидеть до последнего без обновлений, а кто-то просто не имеет возможности апдейта в силу древности девайса. И нет, он не будет покупать новый только из-за хипстерских сайтов с флексбоксом.
              На Android всё хуже, но на 4.3- стандартный браузер на столько ущербный, что многие пользователи пользуются альтернативными, где flexbox хоть и с префиксами, но точно поддерживаются

              Проблема в том, что вы делаете сайт не для себя, а для потенциальных консьюмеров, которые не хотят знать о том, что ваш сайт гораздо красивее и правильнее работает на альтернативных браузерах или системных браузерах из самых свежих системных прошивок. Я бы даже сказал, что те, кто знает что есть альтернативное ПО и можно накатывать кастомы на давно брошенные вендором девайсы (привет самсунгам и хтц) — они как раз не являются потребителями большинства контента, который нацелен на привлечение пользователей. Не стоит всех мерять с точки зрения прошаренного ит-шника, большинству потребителей это не нужно и чуждо.
              • +4
                Нет, мы обсуждаем безаппеляционный комментарий «Извращение какое-то. Не понимаю зачем это в 2016 году вообще...».

                Это был комментарий к содержимому статьи, то есть в итоге мы обсуждаем именно статью, попрошу не перекручивать


                Какая никакая, но хоть что-то отдаленно похожее. Да, нужно подпиливать в каждом конкретном случае, но это хоть что-то.

                То есть статья имеет нерабочие примеры, нельзя просто взять и заменить flexbox на указанные сниппет, хотя преподается материал именно так.


                Если apple вернет возможность откатить версию, до какой версии откатится большинство пользователей? Подскажу — это будет 6-ка. Поэтому кто-то обновлялся не глядя, кто-то почитал интернеты и решил сидеть до последнего без обновлений.

                Дестуктивная логика (не обновляться) и вообще вброс — давайте ссылку на авторитетный опрос или не выдавайте догадки за факты.


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

                Не хотят знать? Вам сбросить ссылку на количество загрузок UC Browser или Chrome for Android что ли? Пользователь хочет лучше. Да, не все, но многие. Не буду голословным, пройдите, пожалуйста, по ссылке: https://developer.android.com/about/dashboards/index.html 73,8% по определению имеют как минимум 4.4 со стоковым браузером, ещё 23,5% имеют Android 4.0-4.3, где с далеко ненулевой вероятностью используют альтернативный браузер. Вот и вопрос: вас очень волнует несколько процентов пользователей Android с устаревшими версиями ОС и браузера, которые не хотят ставить альтернативный браузер? На самом деле вас это может волновать, но переделывать весь сайт на inline-block ради несколько процентов отставших Android большинство разработчиков не будет. Никогда.

                • +3
                  Это был комментарий к содержимому статьи, то есть в итоге мы обсуждаем именно статью

                  Статья правильная и может кому-нибудь пригодиться. Комментарий — неправильный и ненужный в контексте данной статьи — каждый оценит извращенность и целесообразность ее применения применительно к своей задаче.
                  нельзя просто взять и заменить flexbox на указанные сниппет, хотя преподается материал именно так.

                  Где об этом этом написано? Когда слово «альтернатива» превратилось в «100% совместимость в виде сниппета»? «Попрошу не перекручивать» (с)
                  давайте ссылку на авторитетный опрос или не выдавайте догадки за факты.

                  Ну так погуглите. Ну или если бы был ios девайс ниже 6-ки и ipad air — это было бы очевидно, что с ios7 все стало работать просто отвратительно медленно, начиная с залипающей клавиатуры (иногда реакция на ее открытие наступала через секунду или больше) и заканчивая подвисаниями гуя, лечившиеся только софт ребутом. Да, это потом лечили патчами, но каждый мажорный релиз только замедлял работу девайса.
                  Вот актуальная статистика ios на март: http://hwstats.unity3d.com/mobile/os-ios.html — овер 25% юзверей сидит на ios < 9.
                  Вот статистика андроида на март: http://hwstats.unity3d.com/mobile/os-android.html — овер 24% юзверей сидит на < 4.4.
                  Это — статистика с реальных живых девайсов, что там пишет гугль в своей вселенной — абсолютно не интересно.

                  вас очень волнует несколько процентов пользователей Android с устаревшими версиями ОС и браузера, которые не хотят ставить альтернативный браузер?

                  Четверть на одной платформе и четверть на другой — это не пара процентов. А тех разработчиков, кто пилит сайты именно так исключительно потому, что им так удобнее, а не потому, что есть потребность покрыть как можно большую ЦА — никому не рекомендую нанимать.
                  • +1
                    Статья правильная и может кому-нибудь пригодиться. Комментарий — неправильный и ненужный в контексте данной статьи — каждый оценит извращенность и целесообразность ее применения применительно к своей задаче.

                    Статья банально некорректная, она не может быть правильной. Если она будет кому-то нужна — она не поможет, так как примеры не работают как положено. Комментарий же это аргументированное мнение относительно статьи. Если он неправильный и некорректный — то я трамвай, а хабр болото.


                    Где об этом этом написано? Когда слово «альтернатива» превратилось в «100% совместимость в виде сниппета»? «Попрошу не перекручивать» (с)

                    По всей статье: пример на flexbox, альтернатива, скриншот. Вот если бы 2 скриншота было бы рядом… впрочем, они были бы разными:)


                    это было бы очевидно

                    Уважаемый, давайте ФАКТЫ. К примеру, был опрос на х тысячах пользователей iOS версии 7+, у процентов сказали что они откатились бы на более старую версию. Тогда это было бы аргументом. Иначе это ваше персональное мнение, которое совершенно не репрезентативно, увы.


                    овер 25% юзверей сидит на ios < 9
                    И что? Нас интересуют только 2%, у которых iOS 7.1-. Что уже явно не 25% пользователей, которым flexbox недоступен, давайте не манипулировать фактами.

                    овер 24% юзверей сидит на < 4.4
                    Давайте конкретно. В играх с движком Unity (мы говорили про браузеры, ну да ладно) пользователей с Android 4.3- 24,1%, что отличается от указанного мною выше числа на целых 0.6%. Что существенно, но кардинально картину не меняет.


                    Сколько пользователей с каких устройств будет заходить именно на ваш сайт тоже, конечно, вопрос открытый. Но всё не так грустно и неизбежно как вы тут рисуете.

                    • –2
                      К примеру, был опрос на х тысячах пользователей iOS версии 7+

                      Если так рассуждать, то приведите точно такие же факты о количестве нежелающих сделать даунгрейд, иначе это нерепрезентативно и принудиловка от вендора ОС. :) Проблема в том, что раньше это было можно сделать, но с 7-ки вроде apple убрала такую возможность в принципе (за исключением вроде одного месяца после официального релиза) Быстрый гуглинг «how can i downgrade ios» показывает 591k результатов — желание возникало явно больше чем у пары десятков «неправильных» консьюмеров.

                      В играх с движком Unity

                      Что меньше общего количества пользователей, ведь до сих пор живут системы с SoC без поддержки NEON-а, которые уже не учитываются. Но даже без них — 24% очень солидно для того, чтобы их просто дропать.

                      Нас интересуют только 2%, у которых iOS 7.1

                      Ах да, вендорные префиксы, как-то забыл про них — 2016 год на дворе, извращение какое-то. :)
                      • 0

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


                        Что меньше общего количества пользователей, ведь до сих пор живут системы с SoC без поддержки NEON-а, которые уже не учитываются. Но даже без них — 24% очень солидно для того, чтобы их просто дропать.

                        А ещё существуют пользователи, которые не то что в игры построенные на Unity, а вообще не играют. Но порядок цифр, полагаю, всё равно будет ±24%. Не просто дропать, если враппинг не критичен — все пользователи получат то, что задумывалось, у части пользователей без альтернативного браузера может уплыть верстка, да. Нужно смотреть на аудиторию, но это точно не конец света.


                        Ах да, вендорные префиксы, как-то забыл про них — 2016 год на дворе, извращение какое-то. :)

                        Точно, давайте лучше display: inline-block везде фигачить — стильно, модно, молодежно, не то что вендорные префиксы.

                        • –3
                          Короче, фактов у вас нет

                          Ну я хоть что-то привел, пусть и косвенно, в ответ пока ничего нет. Apple заставляет обновлять ОС принудительно, скачивая образ во внутреннюю память (это никак нельзя предотвратить) и надоедая сообщениями «ну поставь меня, ну поставь...».

                          давайте лучше display: inline-block везде фигачить

                          Я когда-то запиливал вебсокеты + флексбокс с тем же прицелом — «стильно-модно-молодежно» для реалтайм игрушки с веб-клиентом (что-то типа MUD-а). Все в итоге свелось к куче проблем со старой opera-mini и со старыми штатными браузерами android < 4.4. Оказалось, что очень многие пользуются штатными средствами и тем, чем привыкли когда-то + не готовы что-то изучать, менять на тот же хром (тупо прожорливее и неповоротливее на их железе, а зачем оно им такое?). Можно, конечно, было сделать фолбэк на флеш или просто лонгполинг + верстку блоками, но это уже было бы не стильно и не модно, хотя и шел 2015 год.
                          А по поводу нерепрезентативности моего опыта — я говорил как владелец acer liquid (android 2.1-2.3.7), acer iconia a501 (android 3.0-4.0.3), fly iq441 (android 4.2), fly iq451 (android 4.3), samsung note 3 (android 4.4-5.1) nexus7 2013 (android 4.4-6.0.1), iPhone5 (ios 6.0-9.3.1), iPad4 (ios 6.0-9.3.1), iPadPro (ios 9.2-9.3.1). Но вообще, эт все, конечно, субъективно.
              • +1
                На многие очень дешевые или устаревшие смартфоны Chrome не ставится вообще, ругается на несовместимость железа.
                • +1
                  Вы хотите сказать, что примеры из статьи лучше отсутствия враппинга в некоторых древних браузеров?
                  Да, инлайн-блоки (пусть без выравнивания высоты и подгонки ширины, зато с читаемым текстом и доступными ссылками) заведомо лучше «модной» вёрстки, скукоженной из-за отстуствия враппинга в нечитаемое однострочное месиво. Вся мощь флексбоксов для адаптивщины именно во враппинге, без него они не лучше CSS-таблиц.
            • –1
              Я делал крайне сложные вещи для iOS6 и использованием flexbox и в целом всё хорошо. (без flexbox это не решалось бы вообще)
              Так, что я за flexbox с префиксами, чем за inline-block у которого то же болячки есть.
          • –6
            Хорошее напоминание для тех, кто использует flexbox где нужно и нет.
            P.S. — для себя решил, что вёрстка хороша тогда, когда Opera 12.17, Safari 5.1.4, IE 9 корректно её отображает, может быть без поддержки всех фич, но корректно.
            • +9

              Странно когда для вас показатель это рендеринг страницы в трех дырявых не поддерживаемых браузерах.
              Давайте таблицами верстать, оно в IE5 будет правильно рендериться. Да, немного медленно, немного сложновато, кривовато, но работает же!

              • +1
                когда деньги платят за ie5 — пишу под ie5
                • +8

                  Грустно у вас с работой, видимо. Меня тарифом 5х не загоните даже на IE8-9.

                  • +1
                    Почему грустно? Тариф вроде 5х. тут скорее дело в квалификации (ну и челенже для некоторых), кто может — пишет, кто не может — не очень.
                    • +2

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

                      • 0
                        Проблема в том, что сайты должны продавать сегодня, а не завтра, поэтому нет смысла платить 1х за то, что не поддержит компанию сегодня и не позволит ей существовать завтра. Сейчас все рассуждения — сплошной максимализм с точки зрения разработчика. А еще есть потребители и их ЦА, которую они любят и уважают и хотя бы иногда нужно смотреть и с их точки зрения.
                        • –1
                          у меня стойкое чувство, что ключевое слово здесь — «буду»
                          • –1

                            На текущих проектах поддерживаю IE10+, задумываюсь о выбрасывании IE10 как только подрастет Edge. В некоторых проектах IE10 уже опционален и по-умолчанию не поддерживается, но подключаются полифиллы если нужно.

                            • +1
                              что значит поддерживаю? если сам волен решать что поддерживать, а что нет — одно дело, другой вопрос когда пишешь систему для корп сектора. например огромный завод, которому нужен веб интерфейс состояния их машин. никто палкой не гонит им угодить, с другой стороны — почему бы и нет?
                              • –1
                                С корп системами может быть гораздо проще — самому решить какой браузер будет у пользователей.
                                • +1
                                  Ой не скажите. Если ты как третье лицо пишешь ПО для корпорации, то уговоры их ИТ или ИБ отдела на новую версию чего-то может затянуться на месяцы, причем без гарантированного результата. Да даже будь вы внутри корпорации не факт, что обновлением нужным вам вы не сломаете что-то чужое.

                                  P.S. И на самом деле это порой даже удобно — когда внезапно всплывает невозможность чего-то реализовать на старой версии, то всегда можно ткнуть в давно забытое письмо где официальным по белому написано, что сам заказчик отказывается от таких-то вещей.
                              • –2
                                Судя по всему по договору серйозно не работали, если из-за ваших понтов клиент потеряет 10% конверсии и вам прийдеться оплатить неустойку, или бесплатно переделать большой проэкт, посмотрим как вы запоете.
                                Во вторых вашу, извиняюсь за выражение, «говноверстку» ни один тэстэр не пропустит в продакшн.
                    • +3
                      Такой подход даёт гарантии. Если работает в этих дырявых браузерах — я уверен, что любой девайс 5-летней давности нормально отобразит вёрстку.
                      Я до недавних пор использовать морально устаревший телефон на android версии 4.0.3 — так там стандартный браузер работал примерно как safari 5.x, ничего там не поддерживалось. Мне думается, в мире много еще такого же барахла как этот телефон.
                      • 0

                        Гарантия плохая, она удерживает пользователя на ПО, через которое его потом взламывают, крадут деньги и личные данные и так далее, а владельцам сайтов/сервисов потом приходится объяснять пользователям что к чему. Но это не нам решать, его право. Тем не менее не вижу ни одной причины пользоваться стоковым браузером на 4.0.3, когда есть альтернативные более безопасные и функциональные браузеры. Чем больше сайтов перестанут работать — тем быстрее пользователь перейдет на лучшее доступное ПО, и тем лучше будет всем.

                        • +1
                          Я как-то читал результаты опроса, где обычных людей из Индии спрашивали пользуются ли они на мобильнике интернетом, и пользуются ли они фейсбуком на мобильнике. Так вот — количество пользователей фейсбука получилось в два раза больше, чем количество пользователей мобильного интернета (чего не может быть)
                          К чему я веду — среднестатистический пользователь в ваккуме не обладает никакой технической грамотностью, не отличает интернет от браузера, и верстаете вы именно для него, а он скорее всего использует предустановленные приложения, т.к. о других не догадывается
                          • 0

                            С таким же успехом он может поставить "новый быстрый просмотрщих интернета" из рекламы, не зная что это альтернативный браузер. Но да, такое имеет место быть)

                            • +1
                              Утверждение верное. Но совершенно бессмысленное в сторону nazarpc, человек слишком зациклен на новом (будущем).
                            • +2
                              Если это сайт вроде VK, то, скорее всего, обновят. А вот если это интернет-магазин, найденный в поисковике — то не будет, он закроет вашу страницу и пойдёт к следующему. Минус клиент. А специфика некоторых магазинов такова, что людей со старыми браузерами может быть много
                              • +2
                                Вас самого не ломает сидеть на ПО, которое дырявое, тормозное, нифига не поддерживает, вообще ужасное по UI — это если судить по вашим же словам, но только вас послезавтрашнего?

                                Знаете, я помню свой восторг, когда впервые увидел iPhone. Через сколько после выхода он стал «пережитком прошлого»? Вы думаете, за эти год-два-три он и правда стал хуже? Нет, программисты нас убедили, что они уже больше не могут писать на настолько быстром процессоре. Разучились, разбаловались, что еще? Позориться или, или гордиться?

                                А теперь скажите, чем Вы лучше этих программистов? Вы берете за базу технологии сегодняшнего дня — это похвально. Зная при этом, что нет ни одного дня, технологии которого на 100% устраивают всех. Но через год вы же скажете, что не можете на технологиях дня годичной давности писать хорошо (а год назад, сегодня, вы гордо говорите, что можете!), и все из-за технологии, а не из-за ваших каких то особенностей?

                                Спасибо вам! Чем больше такого подхода, тем больше работы у тех, кто «может» писать на вчерашнем.

                                И, кстати, от того, что верстку div-ами заменили на что-то более симпатичное семантически, сайты принципиально лучше не стали, вот в чем обида.
                            • +1
                              Видимо, Вы никогда не сталкивались с ситуацией, когда заказчик такой — «хочу IE 8». А заказ большой, включает в себя далеко не только верстку и качать права — дохлый номер. Или когда на доверстке по сайту нельзя использовать бустрап, потому что коллизии с классами изначальной верстки. Или когда заказчик такой «нужны анимации в IE6», а у тебя они на css3, трансформах и прочих радостях жизни(коллега сталкивался, был очень рад). Или когда под Сафари(версию не скажу) отваливается onclick на всем, что не button, если нет cursor: pointer(http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari) — прекрасное рядом(не совсем по теме, но сильно удивлялся, когда обнаружил это «expected behaviour»).

                              В целом и общем, на фрилансе и некоторых фирмах можно, конечно, отказываться от заказов, если они не удовлетворяют собственным вкусам, но в большинстве случаев такой фокус, увы, не прокатывает и приходится потом долбаться с шимами или переверстывать сайт/громоздить костыли. Вывод — переходим на backend)
                              • 0
                                >> А заказ большой, включает в себя далеко не только верстку и качать права — дохлый номер.
                                потом
                                >>… и приходится потом долбаться с шимами или переверстывать сайт/громоздить костыли.

                                Получается Вы беретесь за проект, только потому что за него платят больше чем обычно, но нужно мучатся с поддержкой устаревших браузеров, а после жалуетесь, что времени на него тоже уходит больше чем обычно? Тогда у меня вопрос почему бы не взяться за нормальный проект без «извращений», чувствую, что соотношение объем работы и оплаты за нее, получатся такие же как и с приведенным примером, но нервы Вы себе сохраните.
                                • –2
                                  Вон выше писал — когда работаешь на фрилансе, выбор есть. На большинстве фирм такого выбора нет — вот и весь секрет.
                                  Кроме того, иногда резоном может служить не только оплата — к примеру, если заказ комплексный и включает в себя не только верстку, а и, скажем, разработку бэк-энда на ноде или asp, а не вордпресике(в котором, кстати, тоже есть свои прелести). Даже верстка/js под IE6 может оказаться интересным челленджем(хотя, конечно, я предпочту писать код в духе
                                  var genPath = (x,isClosing=true)=>{
                                      var t=[];
                                      x.forEach((y)=>t.push(...[...y, ' ']));  
                                      return t.join(' ')+(isClosing?"z":"");
                                  };
                                  


                                  var result=sendData.map((x)=>racingDataHolder.data[x.gameType].odds.map((y)=>y.r.find(z=>z.i==x.actionID)).filter((y)=>y)[0]);
                                  


                                  или

                                  `${t.n.match(/\d+/g).join(',')}_${racingTypes.findIndex((z)=>z==y.name)}`
                                  


                                  на ES6, выражения лиц нормальных программистов, которые на это смотрят, иногда умиляют).
                                  Ну и, в конце-концов, новые технологии — это круто и приятно, не спорю, но жизнь не состоит из роз и какающих радугой пони, иногда приходится и лопатой помахать.
                                  • +4
                                    Этих программистов вполне можно понять, особенно если им придется вникать и поддерживать ваш в том числе код.
                                    • 0
                                      Обычно так я пишу в pet-проектах, но иногда забавно попугать людей.
                                • 0
                                  ох, сколько я намучался с этим cursor: pointer на мобильном сафари. А еще, если установлен meta-тег детекта телефонных номеров, то сафари их не просто подчеркивает, как в андроиде, а меняет dom-дерево на ссылку. В результате, у вас в блоке текста на андроиде один стиль, а на айфоне — стиль ссылки
                            • +4
                              Статья, как по мне, прекрасна. Я не думаю, что автор хотел, чтоб все восприняли ее как руководство к действию, хоть и рьяно отстаивает свои позиции. Но эта статья для многих откроет мир, где «не flexом единым». Потому, что как показывает практика, новички, да и не только, хватаются за супер популярные технологии, и кода эти техологии подводят, например в древнем браузере, говорят «это нереально, я испробывал все!». А автор показывает мир, где криво, но живут без flex. Спасибо ему! :)
                              • 0
                                А мне понравилось, как сделал The Guardian.
                                Принцип Cut The Mustard

                                Грубо говоря, чем делать костыли, они делают 2 версии сайта, для старых браузеров и для новых. И применяют progressive enhancement.

                                В итоге, клиенты со старыми браузерами, коих мало, видят контент, но без плюшек.
                                • 0
                                  Проблема использовать flexbox или нет решается для каждого проекта отдельно, потому что аудитории разные, но при использовании flexbox вы не сломаете сайт, просто человек зашедший на него увидит съехавшие один под другой блоки (и он к этому уже привык, в IE7 весь интернет выглядит поехавшим), а если сделать так:
                                  *display: inline; //если хотите еще и трупы IE 6-7 помучать
                                  display: inline-block;
                                  display: flexbox
                                  

                                  То разница будет минимальна.
                                  Я для себя решил использовать flexbox с полифилом для старых IE, НО только тех местах где верстка без него усложнилась бы в разы
                                  • 0
                                    Отображать элементы в обратном порядке еще вот так можно было:

                                    .container {
                                    transform: rotate(180deg);
                                    }

                                    .item {
                                    transform: rotate(-180deg);
                                    }
                                    • 0
                                      Статья конечно прекрасная, но на деле, далеко не везде так легко заменить flexbox вашими стилями…
                                      Ваши примеры состоят по сути, только из цифр, а цифры как и текст, легко расставлять в нужные места тем же text-align: center;
                                      А вот если блоки которые нужно расставить, имеют более сложную конструкцию и кучу кода внутри?

                                      Да и display: inline-block; не менее кривой чем flexbox… Откройте ту же оперу и сравните отступы между блоками.
                                      • +1
                                            text-align: justify;
                                        

                                        Очень важно для любого руководства забыть указать, что это правило наследуется.
                                        • –9
                                          Просто хотелось бы поделиться картинкой по этому поводу.

                                          image
                                          • –2
                                            Не думал что на хабре начнут писать статьи о таких костылях на CSS…
                                            Нам срочно нужен хаб «Ненормальная верстка»!
                                            • +1
                                              Почему костыли? Прекрасно работающая изящная деградация. Вообще Флексбоксы в первую очередь имеет смысл использовать в тех случаях, когда подобные приёмы не дадут 100% желаемого эффекта. Но даже с ними будет неплохо выглядить в старых браузерах.
                                            • +2
                                              Большинство методов из статьи только на упрощенных примерах выглядят хорошо и «работающе». В реальности же, внутри айтемов может быть такое ужасающее количество контента, и между самими айтемами могут быть отношения, которые сделают ваши сниппеты полностью неприменимы.

                                              Не говоря о том, что 70% сниппетов надо делать респонсив с помощью танцов с бубном, не иначе :-).

                                              В то время как флексбокс всё сам делает замечательно и прекрасно.

                                              Ну а хаки вроде `direction: rtl` никакой уважающий себя ревьюер не пустит в продакшен :-).

                                              По поводу 2016 и флексбокса. Около 4ех проектов уже вывел в продакшен на голом флексбоксе, IE11 и все адекватные браузеры для десктопа и мобильных устройств сапортят флексбокс почти из коробки. У IE11 бывают какие-то баги, но очень легко фиксятся.

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

                                              А так статья полезная для проектов «сдал и забыл». Можно хоть абсолют позишенем и калькуляцией на JS центрировать контент для таких проектов :), а порядок менять через jQuery's
                                              .insertAfter()
                                              
                                              Для долгоживущих ваши сниппеты просто недопустимы как альтернатива флексбоксу :-)
                                              • 0
                                                в Coub'е, например, они так и сделали. Я был сильно удивлен, что вся их лента — большой div с height: 100500px, а внутри все их коубы на absolute.
                                                Не знаю, хорошо ли плохо ли, но я бы так делать не стал.
                                                • +3
                                                  Насколько я в курсе, это почти безальтернативный вариант, если нужно как-то анимировать каждый блок (сворачивать/разворачивать, плавно менять местами с другими и т.п.). Иначе при анимации будет постоянный relayout всех этих 100500px, со всеми печальными вытекающими.
                                              • 0

                                                Я просто оставлю это здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

                                                • +1
                                                  Есть и на русском: http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstvam-flexbox-iz-css3.html (еще и с «песочницей» для экспериментов). И совсем короткая шпаргалка: http://css-live.ru/articles-css/shpargalka-po-shpargalke-po-flexbox.html.

                                                  Но ни то, ни другое, ни третье не отменяет необходимость включать мозг, когда а) специфика проекта требует мало-мальски пристойной деградации для «динозавров», б) специфика задачи упирается в ограничения механизма флексбоксов (внезапно, они есть), но прекрасно решается другими средствами (см. пример ниже).
                                                • +2
                                                  Во-первых, спасибо Максиму за ПЕРЕВОД этого занятного (хоть и малость провокационного, не спорю:) материала! Какими бы замечательными ни были флексбоксы, даже они — не стопроцентная панацея. Редко, но встречаются задачи, в которых флексбоксы явно проигрывают другим решениям (порой незаслуженно забытым). Один такой пример — вертикальное центрирование текста в «ячейках» равной высоты (http://css-live.ru/articles-css/flexbox-vs-css-table-vertical-centering-inlines.html). Да, и display:inline-block, и display:table-* — не эквивалент флексбоксам и не замена им. Да, они другие. С другими принципами и другими ограничениями. Но именно знание РАЗНЫХ подходов помогает найти оптимальное решение для конкретного случая. Тогда как подход «зачем учить старьё, когда есть крутые и современные [подставить наиболее раскрученное на момент обсуждения название технологии]» именно в этом конкретном случае как раз приведет к необходимости костылей (напр. дополнительной разметки). Статья Кенана, которую перевел Максим, ценна именно напоминанием о самом существовании этих разных подходов.

                                                  Во-вторых, комментарии очень показательны. Громкость возмущения а-ля «фу, бяка, костыли» четко коррелирует с адресацией этого возмущения переводчику — т.е. с тем, что люди «ниасилили» аж два указания (в начале и в конце!) на то, что это перевод:). Что уж говорить о каких-то там спецификациях…

                                                  Конечно, практическое использование примеров из статьи Кенана — даже если рассматривать их в качестве фоллбэков — требует множества оговорок (напр. нельзя просто взять и добавить флекс-элементам display:table-cell ради фоллбэка, потому что тогда в Firefox, в котором флексбоксы работают по предыдущей версии спецификации, флекс-элементами станут не они, а их анонимная таблица-обертка). Но это — не повод забывать о том, что в CSS есть много разных инструментов, и далеко не всегда самый модный окажется оптимальным в каждой конкретной задаче.
                                                  • +2
                                                    Всем советую поиграть в flexboxfroggy.com, имхо лучший способ понять флексбокс.
                                                    • 0
                                                      Занятно… Спасибо.
                                                      • 0
                                                        А как без flexbox поменять порядок элементов (свойство order), как в последнем примере из css-tricks.com/snippets/css/a-guide-to-flexbox?

                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.