Cтатьи по тегу «flexbox»

Перевод статьи Normalizing Cross-browser Flexbox Bugs с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

Обновлено: в качестве дополнения к этой статье я создал Github-репозиторий Flexbugs (перевод на css-live.ru): поддерживаемый сообществом список проблем с flexbox и кроссбраузерных обходных путей для них. Цель такова, что если вы разрабатываете сайт, используя flexbox, и при этом что-то работает не так, как вы ожидали, то здесь вы можете найти решение.

Давным-давно в сентябре 2013, при тестировании своего проекта «Решено при помощи Flexbox», я обнаружил баг в Internet Explorer 10 и 11, который не давал моему прижатому подвалу действительно прижаться к низу страницы. Я потратил некоторое время, пытаясь обойти эту проблему, но все мои попытки оказались тщетны.

Перевод статьи A Visual Guide to CSS3 Flexbox Properties с сайта scotch.io, c разрешения автора— Димитара Стоянова.

Раскладка Flexbox, официально названная CSS-модуль раскладки гибких боксов – новый раскладочный модуль в CSS3, созданный для улучшения выравнивания, направления и порядка элементов в контейнере, даже когда их размер неизвестен или меняется динамически. Основная характерная черта flex-контейнера — это способность изменять ширину или высоту своих дочерних элементов, чтобы как можно лучше заполнить доступную область на экранах разной ширины.

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

Вместо того, чтобы объяснять, как работают flex-свойства, это руководство сосредоточится на том, как flex-свойства влияют на раскладку визуально.

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

Стандарт HTML5

Для спецификаций CSS этот совет актуален вдвойне: при каждом прочтении открывается очередная тайна. Как-то раз, расследуя детективную историю о пропавшем контексте форматирования, мы ненароком «открыли периодический закон» для свойства display. В этот раз мы столкнемся с мистикой.

…Они появляются из ниоткуда. Они бестелесны. Их не может поймать даже DOM-инспектор. Они своенравны: иногда они незримо приходят на помощь, но могут и довести до слез своими проказами. У них нет имени. Лишь немногие владеют тайной, позволяющей повелевать ими…

Сегодня вы тоже узнаете эту тайну. Но сначала давайте вызовем парочку их.

Перевод материала из github-репозитория Flexbugs с разрешения его владельца — Филипа Уолтона.

Этот репозиторий — поддерживаемый сообществом список проблем с flexbox и кроссбраузерных обходных путей для них. Цель такова, что если вы разрабатываете сайт, используя flexbox, и при этом что-то работает не так, как вы ожидали, то здесь вы можете найти решение.

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

Дело было в пятницу вечером, на любимом форуме нашелся интересный вопрос, на jsFiddle нашлось место для экспериментов. В итоге получилось вот что:

Задача равномерного выравнивания горизонтальных элементов (например, пунктов меню) по всей ширине контейнера стабильно остается актуальной в верстке. Два года назад Максим Усачев (psywalker) написал обстоятельнейший разбор ее решений, который заслуженно стал самой популярной статьей на CSS-live.ru. Были рассмотрены 4 варианта:

1. Вариант с разносторонним выравниванием (на базе float), к сожалению, не способный претендовать на универсальность;
2. Вариант с дополнительным контейнером (в принципе, работоспособное решение, но только для фиксированной ширины элементов);
3. Вариант с text-align: justify для инлайн-блоков и дополнительным элементом-распоркой (приемлемое решение);
4. То же самое, но с заменой элемента-распорки на псевдоэлемент :after (лучшее решение).

У двух последних решений была изюминка в виде двух малоизвестных свойств CSS3 (text-align-last и text-justify), по иронии судьбы с незапамятных времен работающих в IE (где они и появились).

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