CSS Grid и Flexbox решаем сложности адаптивного дизайна для Safari и Internet Explorer


Содержание материала:

Особенности Grid Layout и Flexbox: когда и что лучше применять

Создавать адаптивный дизайн, выравнивать элементы на странице можно различными способами. Разные веб-верстальщики работают с разными инструментами и возможностями CSS. Но почему Flexbox у многих в приоритете? Что особенного скрывает в себе CSS Grid? Об этом и не только мы рассказываем в данном материале.

17 Декабрь 2020

CSS Grid и CSS Flexbox самые известные, широко используемые технологии веб-верстки и горячо обсуждаемые в течение последних лет. Однако, несмотря на некоторые поверхностные сходства, они фактически используются для самых разных задач; каждая из них решает очень разный набор проблем и зачастую те проблемы, которые не способна решить иная технология. Вы и сами можете заметить, что для разных проектов используете разные сетки.

Тем не менее, у многих разработчиков возникает вопрос: когда и что использовать? Точнее даже, когда лучше подойдет именно Flexbox, а когда Grid, можно ли одно заменить другим и так далее. В действительности разобраться во всем этом несложно, но мы решили посмотреть детальнее на эти вопросы и обратить внимание на некоторые особенности обеих технологий.

Grid или Flexbox?

Частый вопрос, но банальный секрет в том, что знать нужно и то и другое, испробовать на практике обе технологии. Впоследствии веб-верстальщик попросту сможет сам осознать, что именно для его компонентов нужнее в данном проекте. Здесь невозможно сказать: «Прислушайтесь к своему «Я» и выберите то, что вам более нравится и более удобно в использовании в техническом плане». И Grid Layout, и Flexbox – это все CSS. И нет никакого значения, что вы пишете display: grid или display: flex, так как все равно вы используете общую их суть. И причина в том, что обе технологии основываются на правилах CSS Intrinsic and Extrinsic Sizing и спецификациях выравнивания Box Alignment.

В ранних материалах мы рассматривали для каких целей и почему верстальщики и разработчики используют разные фреймворки, например, React, Foundation, Vue и прочие. Но это отдельные масштабные инструменты. В случае же с сетками дела обстоят иначе. Они часть CSS, а CSS используется для обработки каждого отдельного элемента веб-дизайна. Соответственно, и это логично, применять можно и то и то, лишь бы выполнялись нужные требования и условия. Например, некоторые дизайнеры используют и не Flex и не Grid, а создают отдельную сетку-контейнер, в которой еще сетки, становящиеся элементами flex. И это практикуется, если особенности верстки и дизайна того требуют. Включили в строгую двумерную grid гибкие части flex. Тоже неплохо.

Flexbox в практике веб-верстки

Попробуйте спросить: «Зачем нужен автомобиль, а не велосипед». Суть в разных возможностях. Что предлагает Flexbox – его описание можно найти в базе MDN – выравнивание и распределение. Таким образом, если на странице есть множество элементов, а в мобильном варианте или при малом размере окна браузера эти элементы должны уже размещаться иначе – то и flex для этих целей как раз более необходим. При этом располагает он элементы так, чтобы контент было удобнее изучать, а значит, большим элементам много пространства, малым – меньше.

Иными словами, flex удобен и необходим при верстке адаптивных дизайнов; для элементов, у которых нет постоянного размера и не требующих строгих параметров разметки; когда от верстальщика (фигурально выражаясь) требуется только разместить все элементы рядом. Например, верстальщику необходима плавающая сетка (размеры изменяющиеся) и четкое разделение на строки. Можно по-разному подойти к решению этого вопроса: grid будет автоматически заполнять ячейки, а flex динамически заполнит эти же самые ячейки. Подходы к решению задачи будут разными, но и вид итоговый тоже.

В первом примере текстовые элементы размещены строго в ячейках (grid). Колонок не может быть больше или меньше, но высота ячеек будет варьироваться от объема текстового элемента. При таком варианте, если при auto-flow есть пустые ячейки, указать длину строки попросту невозможно.

Во втором примере при использовании технологии flex, элементы заполняют собой всё имеющееся пространство, а потому четкого размещения и выравнивания нет.

Но второй пример можно изменить и адаптировать, если для свойства flex-basis установить значение auto. Тогда текст в ячейках не будет переноситься на строки, а ширина ячеек будет «подгоняться» под полную длину текстового блока. Но при этом вся конструкция продолжит оставаться в пределах заданной ширины.

Одно дело примеры, другое – практическое применение. Вспомним, как часто всем нам приходится видеть список тегов, или как его раньше называли «облако тегов». Располагающиеся под статьями или в колонке справа-слева, короткие словосочетания или слова, кажется, что находятся «вперемешку» и не имеют никакой системности в расположении. В данном случае удобнее использовать Flexbox, так как задача состоит в том, чтобы заполнить всё выделенное пространство и разместить текст строго на строчках. Кажется, что это не тот вариант, когда требуются сетки (хоть какие-нибудь). Сетки нужны для того, чтобы выравнивать и размещать строго в колонках и строках. А в случае с тегами о какой-либо системности и речи быть не может.

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

Еще вариант необходимости flex – отцентрирование текста внутри элемента. Впрочем, вместо текста может быть и изображение, иконка или иной блок с данными. Но суть-то как раз в центрировании по вертикали и горизонтали.

В будущем (при наличии поддержки браузером тех свойств Box Alignment properties, что не используются во flex) мы сможем проделывать все примеры без необходимости включения сетки и свойства display: flex в контейнер. Но на сегодняшний момент включение в свой код данной строки CSS – обычная необходимость. И во всех примерах выше она присутствовала.

Для чего еще хорош Flexbox

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

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

Таким образом, подводя итог того, когда и при каких вариантах лучше всего использовать Flexbox, нужно заметить, что он идеален при небольших сценариях, когда требуется все выровнять не просто по осям, а именно, заполняя свободное пространство. Но и так это делать, чтобы контент было удобно изучать. В то же время необходимо обратить внимание на тот факт, что если спустя время в веб-дизайн приходится что-то добавлять, то как раз технология flex подойдет для внедрения этих самых элементов лучше чем grid.

Grid – двумерная сетка – создает новую строку (переход на нее), если в одной много элементов (ячеек). А в большинстве случаев это неудобно и нежелательно. Flex же способен ужать всю строку и добавить новый элемент рядом на линии путем использования свойства flex-basis со значением auto или ноль (0).

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

Grid тоже бывает нужен

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

Суть в том, что Flex работает с одной большой линией, которая распределяется по строкам и представляет собой отдельный контейнер. А Grid, в свою очередь, создает макет из строк и столбцов, где каждая ячейка закрепляется за элементом. Отсюда несложно сделать логический вывод, что Grid CSS удобен тогда, когда элементы должны находиться в строгом выровненном порядке на странице, не менять своего положения. И размер самих элементов здесь роли не играет.

Иногда веб-мастера полагают, что Flexbox нужен только для элементов, а с помощью Grid делают общую разметку страницы. Ох, нет, не стоит так думать… На странице вполне могут находиться два-три элемента, которые требуют четкого размещения в структуре этой самой страницы, а потому как раз таки технология flex будет излишней.

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

Также бывают варианты, когда с помощью flex’а создают статическую сетку, используя flex-grow = 0 и задавая процентный размер элементов. Но ведь аналогично мы поступаем и при работе с grid, поэтому не лишним будет задуматься, а зачем в данном варианте нужен flexbox? Не проще сразу использовать строгий и статичный Grid? На примере ниже создана таблица с технологией flex. Но стоит расширить один из элементов, как вся строгость рушится. Вопрос: «Строгость была нужна»? Если «да», то flex просто неуместен.

Завершение

Даже несмотря на то, что очень легко объяснить и понять, чем Grid Layout отличается от CSS Flexbox, все равно сказать точно, что именно использовать в данный конкретный момент бывает трудно. Тут подходит только вариант пробы обеих технологий. При этом всегда можно использовать и Grid и Flex одновременно или переключать шаблон с одной сетки на другую.

Мы постарались наглядно продемонстрировать и рассказать о том, как логически происходит выравнивание и определение размеров динамических элементов, как влияет на них статика. CSS Grid и Flexbox были созданы для решения разных задач и при этом Grid поддерживается браузерами гораздо хуже, чем Flexbox. В обозримом будущем положение дел для CSS Grid улучшится, и можно будет гораздо чаще использовать сочетание двух технологий. Сейчас такое сочетание возможно при условии, что сайт создается исключительно для современных версий браузеров.

CSS Grid Layout — лучшие практики. Часть 2

Автоматическое или обозначенное расположение элементов

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

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

Какой метод позиционирования выбрать?

При работе с макетом CSS Grid в конечном итоге все сводится к перемещению компонентов из одной строки в другую. Все остальное является вспомогательными действиями для этого.

Решите вместе со своей командой, хотите ли вы именовать строки, используя Template Areas, или будете сочетать различные типы макетов. Я поняла, что мне нравится использовать для небольших компонентов Grid Template Areas. Однако нет ничего правильного или неправильного. Выясните, что лучше для вас.

CSS Grid в сочетании с другими механизмами размещения

Помните, что CSS Grid Layout — это не единственный истинный способ создания макета, который был бы королем всех остальных. Он предназначен для определенного типа макета, а именно двумерного. Другие методы создания макета все еще существуют, и вы должны рассматривать каждый шаблон и то, что ему подходит.

Независимо от того, как часто я пишу о CSS Grid и Flexbox, мне все равно будут задавать вопрос про то, что из этого следует выбрать. Есть много шаблонов, где любой способ верстки подойдет, и это действительно зависит от вас. Никто не накричит на вас за то, что вы выбрали Flexbox вместо CSS Grid или CSS Grid вместо Flexbox.

В моей собственной работе я склонна применению Flexbox для компонентов, где я хочу, чтобы натуральный размер этих компонентов в сильной степени влиял на их расположение, опираясь на другие элементы вокруг. Я также часто использую Flexbox, потому что хочу воспользоваться выравниванием, принимая во внимание, что свойства Box Alignment (https://drafts.csswg.org/css-align/) доступны только для использования в Flexbox и CSS Grid. Также я могу применить контейнер Flex с одним дочерним элементом, только чтобы выровнять его.

Признаком того, что, Flexbox является методом компоновки, который не подходит в данной ситуации — это когда я начинаю устанавливать ширину в процентах для flex-элементов и устанавливаю flex-grow в 0. Причиной добавления процентной ширины для flex-элементов часто является попытка выровнять их в двух измерениях (выравнивание элементов в двух измерениях — это именно то, для чего нужен грид). Однако попробуйте оба метода, и посмотрите, что лучше всего подходит для контента или дизайна.

Вложенные CSS Grid и элементы Flex

Нет абсолютно никаких проблем с созданием Grid Item(элемент сетки) как Grid Container (контейнер сетки), в результате чего одна сетка будет располагаться внутри другой. Вы можете сделать то же самое с Flexbox, создав Flex Item и Flex Container. Также можно сделать Grid Item и Flex Container или Flex Item и Grid Container — ни одна из этих задач не вызовет трудностей!

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

Вы можете располагать на одной странице несколько гридов одновременно

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

Отказы и поддержка старых веб-браузеров

«Грид, в сочетании с @supports, позволил нам лучше контролировать количество различных вариантов макета. Он также отлично поработал с нашим подходом прогрессивного улучшения, что означает, что мы можем вознаградить тех, у кого есть современные веб-браузеры, не препятствуя доступу к контенту тем, кто не использует новейшие технологии».

— Джо Ламберт, работающий на сайте rareloop.com

В опросе многие люди упоминали более старые обозреватели, однако мнения разделились поровну между теми, кто считает поддержку старых версий трудной, и те, кто считает ее легким благодаря Feature Queries, и тот факт, что грид замещает другие методы создания макетов. Я подробно написала о механизме создания этих резервных копий в статье «Использование CSS Grid: поддержка веб-браузеров без Grid».

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

Конечно, есть ситуации, когда один веб-браузер еще не поддерживает определенную спецификацию или некоторых ее частей. С CSS Grid нам очень повезло, что в веб-браузерах он был полностью реализован в течение короткого промежутка времени. Поэтому наше внимание должно быть сосредоточено на тестировании кода в браузерах с его поддержкой и без. Возможно, вы также решили использовать префиксные версии свойств -ms в IE10 и IE11, которые затем потребует тестирования в качестве третьего типа обозревателей.

Топ-пост этого месяца:  Интернет магазины Wordpress

Веб-браузеры, поддерживающие современный CSS Grid Layout (а не версию IE), также поддерживают Feature Queries. Это означает, что вы можете протестировать его поддержку перед использованием.

Тестирование в браузерах без поддержки грида

При использовании fallbacks (резервный вариант) для веб-браузеров без поддержки грида (или с использованием префиксных версий -ms для IE10 и 11) вы захотите проверить, как они отображают его. Для этого вам нужен способ просмотра вашего сайта в выбранном обозревателе.

Я не стала бы применять подход для проверки вашего Feature Query, путем задания некорректных значений свойствам грида. Такой способ будет работать только в том случае, если ваша таблица стилей невероятно проста, и вы помещаете абсолютно все, что связано с вашим гридом внутри Feature Query. Это очень хрупкий и трудоемкий способ работы, особенно если вы активно используете грид. Кроме того, старый программы могут не поддерживать не только CSS Grid Layout, но и другие свойства CSS.

Есть несколько простых способов наставить себя на правильный путь тестирования ваших fallbacks. Самый простой способ — если у вас достаточно быстрое подключение к Интернету и вы не платите абонентскую плату — это воспользоваться таким сервисом, как BrowserStack. Это сервис, который позволяет просматривать веб-сайты (даже те, что разрабатываются на вашем компьютере локально) на целом ряде реальных веб-браузеров. BrowserStack предлагает бесплатные учетные записи для проектов с открытым исходным кодом.

Чтобы протестировать локально, моим предложением было бы использовать виртуальную машину с установленным вами целевым обозревателями. Microsoft предлагает бесплатные загрузки виртуальной машины с версиями IE для IE8, а также Edge. Вы также можете установить на виртуальную машину более старую версию браузера без поддержки CSS Grid. Например, получив копию Firefox 51 или ниже. После установки вашего старого Firefox обязательно отключите автоматические обновления, как описано здесь, так как в противном случае он будет спокойно обновлять себя!

Затем вы можете протестировать свой сайт в IE11 и в Firefox на одной виртуальной машине (это гораздо менее хрупкое решение, чем неправильные значения свойствам). Настройка может занять около часа или около того, но после вам будет очень удобно тестировать свои fallback’и.

Отучивание от старых привычек

«Это был мой первый раз, когда я использовал грид, так что было много понятий, которые нужно изучить, и свойства чтобы понять. Я нашел наиболее трудным это отучиться от того, что делал годами, например, очистка float’ов и упаковка в контейнеры в виде div’ов.

Многие люди, ответившие на опрос, упомянули о необходимости отучения от старых привычек и о том, насколько макеты будет легче изучать людям, совершенно не знакомым с CSS. Я склонна согласиться. При обучении людей лично у начинающих мало проблем с CSS Grid, в то время как опытные разработчики стараются использовать его как одномерный макет. Я видела попытки применения в «сетчатых систем» с применением грида контейнеров, которые нужны лишь для сеток основанных на float или flex.

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

«CSS Grid Layout — самая захватывающая разработка CSS со времени появления медиа-запросов. Он так хорошо продуман для реальных потребностей разработчиков и это абсолютное наслаждение использовать его в реальных проектах — как для дизайнеров, так и для разработчиков ».

Заключение

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

  • Держите в уме возможность переупорядочивания контента. Убедитесь, что визуальное представление не теряет связь с структурой данных в документе.
  • Тестирование с использованием реальных целевых веб-браузеров с локальной или удаленной виртуальной машиной.
  • Не забывайте, что старые методы компоновки все еще актуальны и полезны. Попробуйте разные способы реализации шаблонов. Не зацикливайтесь на CSS Grid.
  • Знайте, что, будучи опытным разработчиком интерфейсов, у вас, вероятно, будет целый набор предубеждений о том, как должен создаваться макет. Постарайтесь смотреть на новые методы свежим взглядом, а не адаптировать их к старым приемам.
  • Продолжайте разбираться. Мы все еще новички в этом. Проверяйте свою работу и делитесь своими открытиями.

Flexbox против Grid в CSS3

CSS — это Каскадные Таблицы Стилей. Он описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях. Он может управлять макетом нескольких веб-страниц одновременно. CSS обрабатывает внешний вид веб-страницы. С помощью CSS можно управлять цветом текста, стилем шрифтов, расстоянием между абзацами, используемыми фоновыми изображениями или цветами, дизайном макета, размером и расположением столбцов, вариантами отображения для различных устройств и размеров экрана, а также множеством других эффектов. Это экономит много работы. В этой статье мы собираемся различать CSS3 Flexbox и Grid layout. Это поможет вам выбрать правильный, как ваш проект требование и дизайн веб-сайтов красиво и более заметно.

Итак, давайте начнем.

Будет много задач макета, где мы могли бы спорить об использовании Grid или Flexbox в качестве решения. Вот некоторые мысли:

  • Flexbox сделано для одномерных планов и решетка сделана для двухмерных планов.
  • Flexbox стал чрезвычайно популярным среди front-end разработчиков с последних нескольких лет.
  • Сетка намного новее, чем Flexbox, и имеет немного меньшую поддержку браузера.
  • Flexbox предназначен для размещения элементов в одном измерении-в строке или столбце. Сетка предназначена для размещения элементов в двух измерениях-строках и столбцах.
  • Flexbox упрощает разработчикам создание динамических макетов и выравнивание содержимого в контейнерах.
  • Если вы раскладываете элементы в одном направлении, то вы должны использовать Flexbox. Это даст вам больше гибкости, чем CSS сетки. Это также будет проще поддерживать и требовать меньше кода.
  • Если вы собираетесь создать весь макет в двух измерениях с обеими строками и столбцами, то вы должны использовать CSS Grid. Это даст вам больше гибкости, сделает вашу разметку проще, и код будет легче поддерживать.
  • Flexbox берет за основу в содержании в то время как сетка берет за основу в макете.
  • Сетки не образуют одномерный заголовки.
  • С сеткой вы можете придерживаться десяти столбцов. С другой стороны, вам не придется иметь дело с ограничениями в Flexbox.
  • Сетка полностью незафиксирована и готова к работе в Chrome, Opera, Firefox и Safari. Даже Edge поддерживает его, хотя и более старую версию спецификации, которую вы можете получить с помощью Autoprefixer.
  • Flexbox на самом деле просто помогает вам разместить два элемента рядом друг с другом.
  • существует супер мощный метод в сетке. Он использует грид-зоны. В основном каждый класс CSS называют и создают шаблон непосредственно с этими именами.
  • Grid реализует свойства распределения пространства и выравнивания, которые являются частью модуля Box Alignment, поэтому есть возможность играть с выравниванием и расстоянием элементов сетки в некоторой степени.
  • Flexbox удивительно прост и отлично работает для всех браузеров.
  • Сетки отлично подходят для построения общей картины. Они делают его действительно легким управлять планом страницы, и могут даже отрегулировать более неортодоксальные и более несимметричные конструкции.

Flexbox отлично подходит для выравнивания содержимого внутри элементов. Использовать Flex для установки мелких деталей конструкции.

CSS-сетки и Flexbox в адаптивном веб-дизайне

CSS Grids and Flexbox in Responsive Web Design

Мы начнем с быстрого обзора текущего стандарта отрасли: сеток построеной на флоатах . Мы рассмотрим как быстро создать такую сетку плюс преимущества и недостатки такого подхода. Мы также рассмотрим медиа-запросы и отзывчивые изображения, включая новый тег и Picturefill. Мы быстро перейдем к Flexbox, сначала исследуем как работает Flexbox, так как он сильно отличается от float. Мы будем верстать простую сетчатую систему с помощью Flexbox, и рассмотрим сходства и различия с сеткой построенной на флоатах.

Затем мы воспользуемся превосходным выравниванием Flexbox и функциями позицинирования, чтобы увидеть преимущества над сетками, которые мы делали флоатами. Наконец, мы завершим наш первый день рассмотрев общую проблему. У вас есть несколько элементов, которые вы должны выкладывать в столбцах и / или строках на веб-странице, но вы не представляете, сколько там эелементов. (Элементом может быть изображение, карта, медиа-объект или что-то еще, что будет считаться единицей контента.)

Во второй день мы погрузимся в CSS Grid, совершенно новую спецификацию, доступную в последних браузерах. Мы рассмотрим базовый синтаксис Grid, работая над макетом картины Мондриана в качестве примера, который мы создадим с помощью Grid. Затем мы перейдем к некоторым альтернативным синтаксисам Grid, рассмотрим вложенные и смещенные макеты сетки. Конечно, мы также рассмотрим проблемы совместимости — как мы можем сделать работу Grid в разных браузерах.

Наконец, при понимании и освоении Flexbox и Grid мы попытаемся объединить эти элементы для лучшего решения проблемы макета веб-страницы. К концу этого курса вы сможете сформулировать сильные и слабые стороны макета на основе float, Flexbox и Grid, и вы сможете создавать адаптивные макеты на каждой из этих технологий.

  • Исследуйте Flexbox, одномерный инструмент компоновки, который наконец готов к использованию в современных браузерах
  • Изучите хаки, чтобы заставить Flexbox работать с полными макетами страниц, аналогично тому, как это делается в адаптивных средах проектирования, таких как Bootstrap 4, Foundation 6 и UIkit 3
  • Откройте CSS Grid, правильный способ прокладки двухмерного дизайна
  • Узнайте о совместимости CSS Grid, чтобы сделать этот новый инструмент полезным сегодня
  • Внедрите медиа-запросы, отзывчивые изображения и другие передовые методы реагирования в гридах и Flexbox
  • Объедините Flexbox и Grid для создания современных и перспективных макетов

Ваш инструктор — Джен Крамер, уже более семнадцати лет Джен Крамер воспитывает клиентов, коллег, друзей и аспирантов о значении «качественного сайта». С 2000 года она создала веб-сайты, которые поддерживают бизнес и маркетинговые цели в независимом качестве, а также часть агентства. Джен является преподавателем в Гарвардской школе в области магистра искусств в области цифрового медиа-дизайна, преподавая не менее пяти курсов в год, консультируя студентов и помогая в разработке учебных программ.

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

Видео в формате .webm — Работает в Google Chrome

CSS flexbox не работает в IE10

В IE10 этот код работает некорректно:

Что должно произойти, так это то, что input[type=submit] должен быть 31px в ширину, а input[type=text] занимает остальную часть доступного пространства внутри form . Случается, что input[type=text] по умолчанию по умолчанию имеет значение 263px.

Это прекрасно работает в Chrome и Firefox.


Режимы макета макета не полностью (полностью) поддерживаются в IE. IE10 реализует версию «tween» спецификации, которая не совсем недавно, но все еще работает.

В этой статье CSS-Tricks есть несколько советов по использованию браузера flexbox (включая IE): http://css-tricks.com/using-flexbox/

edit: после небольшого исследования IE10 flexbox режим макета реализован в соответствии со спецификацией проекта W3C в марте 2012 года: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

Самый последний черновик — примерно год или около того: http://dev.w3.org/csswg/css-flexbox/

Как сказал Эннуи, IE 10 поддерживает версию -ms с префиксом Flexbox (IE 11 поддерживает ее без префиксов). Ошибки, которые я вижу в вашем коде:

  • У вас должен быть display: -ms-flexbox вместо display: -ms-flex
  • Я думаю, вы должны указать все значения 3 flex , например flex: 0 1 auto , чтобы избежать двусмысленности

Освоение flexbox для современных веб-приложений

Несмотря на то, что синтаксис может быть изначально запутать, модуль flexbox соответствует своему названию. Он создает интеллектуальные блоки, способные растягиваться и изменять свой визуальный порядок. Он обеспечивает простое решение для проблем, с которыми всегда сталкивались в CSS: вертикальное центрирование и равные высоты. Flex-элементы действительно удобны и с ними приятно работать.

Модуль Flexbox Layout (flexible box — «гибкий блок», на данный момент W3C Last Call Working Draft) ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).

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

Flexbox действительно прекрасно себя показывает в HTML5-приложениях. Большинство веб-приложений состоят из ряда модульных, многократно используемых компонентов. Вы можете использовать flexbox для тех участков макета, которые вызывают особую головную боль и для которых в обычных случаях необходимы CSS-хаки. Небольшие участки лайаута очень хорошо работают с flexbox, а для лайаутов большого масштаба можно использовать floats и другие инструменты.

Я c размахом использую flexbox в приложении, над которым сейчас работаю, и я очень доволна тем, как он управляет лайаутом и насколько умно производятся расчеты с блоками. Я хотела бы поделиться некоторыми примерами — буду признателна за любую обратную связь.

Эта статья предполагает, что у вас уже есть представление о flexbox. Множество информации о нем можно найти в интернете. Но имейте в виду, что спецификация претерпела несколько изменений за несколько лет.

Есть три версии flexbox, наибольшая разница в синтаксисе между версиями 2009 и 2012 годов:

  • Новый синтаксис синхронизирован с текущей спецификацией (например, display: flex).
  • Переходный синтаксис — неофициальный синтаксис с 2012 года, поддерживается только IE 10 (например, display: -ms-flexbox).
  • Старый синтаксис с 2009 года (например, display: box).

Поддержка браузерами

Посмотреть более детально, какой браузер какой синтаксис поддерживает можно на Can I Use .

Браузеры, поддерживающие новый синтаксис

Десктоп:

  • без префикса: Chrome 29+, Firefox 28+, IE 11+, Opera 17+
  • с префиксом: -webkit- для Chrome 21+, Safari 6.1+, Opera 15+

Обратите внимание, что старые версии Firefox (22-27) поддерживают новый синтаксис Flexbox за исключением свойств flex-wrap и flex-flow. Opers (12.1+ и 17+) поддерживает flexbox без вендорного префикса, но промежуточные версии 15 и 16 требуют вендорный префикс.

Touch-устройства:

  • без префикса: Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for Android 39+, Firefox for Android 33+, IE 11+ mobile
  • с префиксом: -webkit- для iOS 7.1+

Почти все браузеры, упомянутые выше, имеют старые версии, которые поддерживают предыдущий вариант синтаксиса flexbox, за исключением некоторых свойств, таких как flex-wrap и flex-flow (последний является сокращением свойств flex-direction и flex-wrap). Если избегать свойства flex-wrap (и, соотвественно, использовать flexbox в многострочных лайаутах), мы получаем потрясающую поддержку браузерами, сливая старый и новый синтаксис.

Браузеры, поддерживающие промежуточный синтаксис

Desktop и touch-устройства: IE 10 (with -ms- vendor prefix)

Браузеры, поддерживающие старый синтаксис

Все перечисленные браузеры требуют префикс -webkit- (за исключением Firefox, которому необходим префикс -moz-).

Десктоп: Firefox 2 — 21, Chrome 4 — 20, Safari 3.1 — 6

Touch-устройства: Android 2.1 — 4.3, iOS 3.2 — 6.1, UC browser 9.9 on Android, BlackBerry 7

Для современных браузеров c авто-обновлением (т.е. десктопных Chrome, Firefox, IE и Opera), новый синтаксис работает из коробки.

Браузеры, не поддерживающие flexbox

Десктоп: Старые версии IE (9) и Opera (12)

Touch-устройства: Opera Mini

Если вас испугали вендорные префиксы и изменения в синтаксисе, посмотрите рекомендации Криса Койера .

Такжен вы можете использовать следующие инструменты, чтобы получить наилучшую поддержку браузерами через префиксы:

    Autoprefixer
    Это инструмент для ватоматической расстановки префиксов. Пишете ли вы CSS или используете препроцессор — это то, что нужно.

Среди этих инструментов я бы рекомендовал Autoprefixer. Я не экспериментировал с другими заточенными под препроцессоры решениями и буду рад отзывам. Обратите внимание, если вы используете миксины CSS-фреймворков (каких как Bourbon или Compass для Sass, Nib для Stylus или LESS Hat for LESS), они уже поддерживают вендорные префиксы для flexbox.

С помощью такого инструмента, как Autoprefixer, вы действительно получите большую поддержку flexbox, за исключением IE 9 и Opera Mini. Конечно, вы должны будете тщательно проверить ваше приложение во всех браузерах, чтобы убедиться, что различный синтаксис поддерживается.

Давайте посмотрим на несколько хороших примеров использования flexbox в веб-приложении.

1. Неопределенное число детей в родительском элементе

Use case: В моем приложении еcть фильтр. Количество фильтров зависит от того, авторизован пользователь или нет. Анонимный пользователь видит два фильтра («Popular» и «Latest»), тогда как авторизованный пользователь видит четыре (добавляются «Starred» и «Favorites»).

Проблема: Я хочу написать стили для обоих вариантов без каких-либо изменений в CSS

Обсуждение: Обычно вы используете выражение if в шаблоне, чтобы проверить, авторизован ли пользователь. Если мы используем float при верстке, то для неавторизованного пользователя мы задаем ширину одного фильтра 50%, а для авторизованного — 25%.

Решение: используя flexbox, вы можете задать свойство display: flex родительскому контейнеру, а дочерним — свойство flex равное 1, сделав таким образом дочерние элементы равной ширины внутри контейнера. Таким образом, CSS остается неизменным не зависимо от количества элементов. Помните, что свойство flex — это сокращение flex-grow, flex-shrinkand flex-basis.

Демо:

2. Поля ввода с иконками

Use case: Я хочу добавить смысловые иконки к полям ввода на форме.

Топ-пост этого месяца:  Частные сделки в Яндекс Директ - что это и как работает

Проблема: Я хочу найти гибкое, элегантное решение, которое работает без необходимости указывать высоту и ширину элементов.

Обсуждение: Это одна из классических проблем. Разные CSS-фреймворки решают ее по-разному, в основном, используя display: table-cell или абсолютное позиционирование.

Решение: а теперь flex-решение. Все, что нам нужно, это обернуть поле ввода и иконку в контейнер с display: flex. Затем, применить flex: 1 к полю ввода для того, чтобы оно заняло всю ширину контенера минус ширина иконки.

Демо (используется иконка Font Awesome):

3. Визуальный порядок элементов

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

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

А. Изменение визуального порядка с помощью flex-direction

Use case: У меня есть боковая панель, спозиционированная справа от основного содержимого. На маленьких экранах я хочу, чтобы панель располагалась сверху от основного содержимого, т.е. в обратном порядке.

Проблема: Я не хочу использовать JavaScript или CSS хаки для изменения визуального порядка.

Обсуждение: Flexbox — это удивительный инструмент для адаптивных макетов. Мы можем использовать его двумя способами: использовать свойство flex-direction или свойство order. Давайте рассмотрим первый вариант.

Решение: Расположим боковую панель перед основным содержимым в лайауте. У этого есть две причины: во-первых, мы придерживаемся принципа mobile-first, а во-вторых — такое расположение больше подходит для программ чтения с экрана. Зададим свойство flex-direction: column для родительского контейнера (по умолчанию оно имеет значение row). В медиа запросе для больших экранов, изменим значение flex-direction на row-reverse, это решит нашу задачу.

В качестве бонуса, зададим ширину 180px для боковой панели на больших экранах.

B. Изменение визуального порядка с помощью свойства order

Use case и проблема остаются такими же, как в предыдущем примере.

Обсуждение: Свойство order предоставляет больший контроль над визуальным порядком, чем flex-direction.

Решение: Зададим свойство flex-direction: column родительскому контейнеру для мобильных устройств. Теперь, в медиа запросе min-width изменим свойство flex-direction на row, чтобы боковая панель отображалась слева, а основное содержимое справа. Чтобы изменить порядок элементов, укажем свойство order: 1 для основного содержимого и order: 2 — для боковой панели!

С. Переключение порядка элементов

Use case: Я хочу отобразить список из пяти наиболее высокооплачиваемых актеров Голливуда в 2013 году, и добавить возможность переключения направления сортировки.

Проблема: Я хочу сделать это на чистом CSS, я не знаю почему и вообще не уверен, возможно ли это.

Обсуждение: Это простая демонстрация без использования JavaScript, чтобы показать мощные возможности Flexbox. Возможно, это непрактично и глупо, но давайте посмотрим, возможно ли это вообще.

Решение: Добавим переключатель, который будет изменять порядок элементов от меньшего к большему. Ниже добавим список актеров. Используя псевдо-класс :checked, мы выберем следующий за переключателем список и изменим порядок элементов в нем (в помощью flex-direction: column-reverse). Это довольно странно, но прекрасно работает, если вы не используете приложения для чтения с экрана. В приведенном ниже демо, используйте переключатель, чтобы посмотреть результат. В спецификации упоминается, что свойство order не влият ни на tabindex, ни на программы чтения с экрана, но я бы не рекомендовал этот способ на реальных проектах. Тем не менее этот способ можно использовать для быстрого прототипа.

Обратите внимание: В текущей версии Firefox есть баг — tabindex соответствует визуальному порядку, а не исходному порядку. Вы можете посмотреть тест-кейсы CSS Accessibility Community Group.

4. Модуль комментариев

Use case: У меня есть обычный модуль комментариев, с изображением слева и содержимым справа. Аватар всегда одинаковой нирины и высоты (не адаптивный).

Проблема: Я использую flexbox, но содержимое перекрывает изображение:

Если задать max-width 100% и height auto для изображения, получим следующее:

Обсуждение: Этот пример похож на пример «Поля ввода с иконками». Тем не менее, мы можем использовать его для обсуждения свойства flex-shrink, которое может быть полезно в некоторых случаях.

Решение: Добавим свойство display: flex родительскому контейнеру. Вы можете заметить, что содержимое комментария перекрывает аватар (или аватар слишком маленький, как на картинке выше). Чтобы исправить это, добавим к изображению свойство flex-shrink: 0, которое гарантирует, что аватар не будет уменьшаться, подстраиваясь под другие flex-элементы. Альтернативный способ — задать свойство flex: 1 содержимому комментария. В целом, спецификация рекоммедует использовать свойство flex, однако неплохо знать и о свойстве flex-shrink.

5. Комплексное меню

Use case: Меню в моем приложении включает форму поиска и виджет фильтрации. В нем смешаны кнопки, поля ввода, иконки и текст.

Проблема: Я беспокоюсь о том, чтобы лайаут не сломался на разных размерах экрана.

Обсуждение: Это отличный случай, чтобы использовать flexbox. У нас есть несколько элементов фиксированной ширины и несколько элементов, которые должны заполнять всю доступную ширину.

Решение: Мы можем использовать flexbox, чтобы задать вертикальное центрирование и сделать блок фильтраии и поиска адаптивным.

6. Карточки

Use case: Я делаю модуль карточек для моего приложения на основе компонента Google. В мобильной версии эти карточки выстраиваются в одну колонку.

Проблема: Я хочу, чтобы на больших экранах карточки располагались в строку. Высота карточек в одной строке должна быть одинаковой, но я не хочу создавать дополнительные обертки для строк. Кнопка «See more» должна всегда располагаться внизу карточки.

Обсуждение: Мы можем рассмотреть дополнительные свойства модуля flexbox, такие так margin: auto, чтобы более разумно управлять интервалом.

Решение: Flexbox предоставляет неверояное решение для древней проблемы CSS: выравнивания высот. На самом деле flexbox является настолько гибким, что позволяет сделать карточки в одной строке одинаковой высоты, при этом каждая строка не будет обернута в дополнительный контейнер. Он также позволяет отобразить кнопку «See all» так, как если бы она была абсолютно спозиционирована по низу относительно карточки с помощью margin: auto.

Заключение

Flexbox идеально подходит для гибридного веб-приложения, целевая аудитория которого по большей части пользуется планшетами с современными браузерами. На самом деле, некоторые популярные CSS-фреймворки уже используют flexbox, например, Foundation for Apps и Ionic .

Если ваше приложение требует поддержки только современных браузеров, добро пожаловать на борт! Использование инструментов, таких, как Autoprefixer, облегчает переход в мир flexbox, с его многочисленными версиями и разным синтаксисом.

Пока flexbox используется хорошо вместе с float, но он может и заменить его, а также делать другие вещи, которые не могут другие способы расположения блоков, такие как inline-блоки, display: table или абсолютное позиционирование. CSS Gr > предназначен для замены таких хаков, как float, но пока этот стандарт находится на ранней стадии и плохо поддерживается браузерами . Однако я смею мечтать, что в будущем мы будем использовать CSS сетки и flexbox, чтобы создавать интуативны пользовательские интерфейсы.

Это займет некоторое время, пока вы скажете «Ага!» flexbox, потому что вам отвыкать от того, что вы уже знаете о расположении блоков CSS. После того, как вы свободно заговорите на языке CSS, процесс проектирования приложений станет для вас более простым, а таблицы стилей будут выглядеть красивее.


Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

Flexbox в CSS

Статья-шпаргалка по FlexBox. Сравнительно новая модель верстки известная как Flexbox, становится все популярнее. В первую очередь за счет удобного использования при создании каркасов и верстки отдельных элементов HTML страницы. Во вторую, за счет совершенно новых возможностей. В этой статье я попробую разобраться во всех тонкостях Flexbox и доступно поделиться знаниями с вами.

Если говорить коротко, то верстка с Flexbox дает нам простые решения некогда непростых задач. Например, когда нужно выровнять элемент по вертикали, или прижать подвал к низу экрана, или просто вставить несколько блоков в один ряд, так чтобы они занимали все свободно пространство. Подобные задачи решаются и без flex. Но как правило, эти решения больше похожи на «костыли» — приемы использовать css не по назначению. Тогда как с flexbox такие задачи решаются именно так, как задумывает flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), коротко flexbox, создана, чтобы убрать недостатки при создании самых разных HTML конструкций, в том числе адаптированных под разную ширину и высоту, и сделать верстку логичной и простой. А логичный подход, как правило работает в неожиданных местах, там где результат не проверялся — логика наше все!

Flexbox позволяет элегантно контролировать самые разные параметры элементов внутри контейнера: направление, порядок, ширину, высоту, выравнивание вдоль и поперек, распределение свободного места, растяжение и сжатие элементов.

FlexBox состоит из Контейнера и его Дочерних элементов (items) (гибких элементов).

Главная ось — главное направление движения элементов внутри контейнера. Направление главной оси можно изменить с помощью свойства flex-direction. Обратите внимание, что при смене осей, меняются только направления движения блоков внутри, а начало, конец и размер контейнера остаются прежними.

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

Поперечная ось — направление движения элементов, когда они не умещаются в контейнер по направлению главной оси. Поперечная ось всегда перпендикулярна (⊥) главной.

Начало и конец поперечной оси — по поперечной оси заполняются ряды от начала и до конца контейнера. В каждом таком ряду располагаются элементы (читайте ниже).

  • Размер (главный и поперечный) — базовая величина по которой высчитывается ширина или высота внутренних элементов, если размер указан не точно (указан в процентах или не указан вообще, а элемент должен растянуться или сжаться).
  • Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; или display:inline-flex; .

    После включения flex свойства, внутри контейнера создаются две оси: главная и поперечная (перпендикулярная (⊥), кросс ось). Все вложенные элементы (первого уровня) выстраиваются по главной оси. По умолчанию главная ось горизонтальная и имеет направление слева направо (→), а кросс ось соответственно вертикальная и направлена сверху вниз (↓).

    Главную и кросс оси можно поменять местами, тогда элементы будут располагаться сверху вниз (↓) и когда перестанут вмещаться в высоту то будут двигаться слева направо (→) — то есть оси просто поменялись местами. При этом начало и конец расположения элементов не меняется — меняются только направления (оси)! Именно поэтому нужно представлять себе оси внутри контейнера. Однако не нужно думать, что есть какие-то там «физические» оси и они на что-то влияют. Ось тут — это только лишь направление движения элементов внутри контейнера. Например, если мы указали выравнивание элементов по центру основной оси и потом изменили направление этой основной оси, то изменится и выравнивание: элементы были в середине по горизонтали, а стали в середине по вертикали. См. пример.

    Еще одной важной особенностью Флекс-бокс является наличие рядов в поперечном направлении. Чтобы понять о чем речь, давайте представим что есть главная горизонтальная ось, много элементов и они не «лезут» в контейнер, поэтому переходят на другой ряд. Т.е. контейнер выглядит так: контейнер, внутри него два ряда, в каждом ряду по несколько элементов. Представили? А теперь запомните, что выравнивать по вертикали мы можем не только элементы, но и ряды! Как это работает хорошо видно в примере к свойству align-content. А вот так это выглядит схематически:

    CSS свойства, которые могут влиять на модель построения макета: float , clear , vertical-align , columns не работают во flex конструкции. Тут используется другая модель построения макета и эти css свойства просто игнорируются.

    CSS свойства Flexbox

    Flexbox содержит разные css правила для управления всей flex конструкцией. Одни нужно применять к основному контейнеру, а другие к элементам этого контейнера.

    Включает flex свойство для элемента. Под это свойство попадает сам элемент и вложенные в него элементы: затрагиваются только потомки первого уровня — они станут элементами flex контейнера.

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

    flex и inline-flex отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

    Изменяет направление главной оси контейнера. Поперечная ось меняется соответственно.

    • row (default) — направление элементов слева направо (→)
    • column — направление элементов сверху вниз (↓)
    • row-reverse — направление элементов справа налево (←)
    • column-reverse — направление элементов снизу вверх (↑)

    Нужно понимать, что при переходе с row на column или с row-reverse на column-reverse меняется только направление осей и больше ничего. Начало и конец расположения блоков остается неизменным (см. картинку в начале). Т.е. если при row элементы начинали свой путь справа/сверху, то при column все останется также — изменится только направление. (см. пример свойства flex-wrap)

    Управляет переносом непомещающихся в контейнер элементов.

    • nowrap (default) — вложенные элементы располагаются в один ряд (при direction=row) или в одну колонку (при direction=column) независимо от того помещаются они в контейнер или нет.
    • wrap — включает перенос элементов на следующий ряд, если они не помещаются в контейнер. Так включается движение элементов по поперечной оси.
    • wrap-reverse — тоже что wrap только перенос будет не вниз, а вверх (в обратном направлении).

    меню

    flex-flow: direction wrap

    Объединяет оба свойства flex-direction и flex-wrap . Они часто используются вместе, поэтому чтобы писать меньше кода было создано свойство flex-flow .

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

    Выравнивает элементы по основной оси: если direction=row, то по горизонтали, а если direction=column, то по вертикали.

    • flex-start (default) — элементы будут идти с начала (в конце может остаться место).
    • flex-end — элементы выравниваются по концу (место останется в начале)
    • center — по центру (место останется слева и права)
    • space-between — крайние элементы прижимаются к краям (место между элементами распределяется равномерно)
    • space-around — свободное пространство равномерно распределяется между элементами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
    • space-evenly — тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

    меню

    Выравнивает ряды, в которых находятся элементы по поперечной оси. То же что justify-content только для противоположной оси.

    Заметка: Работает когда есть как минимум 2 ряда, т.е. при наличии только 1 ряда ничего не произойдет.

    Т.е. если flex-direction: row , то это свойство будет выравнивать невидимые ряды по вертикали ¦ . Тут важно заметить, что высота блока должна быть задана жестко и должна быть больше высоты рядов иначе сами ряды будут растягивать контейнер и любое их выравнивание теряет смысл, потому что между ними нет свободного места. А вот когда flex-direction: column , то ряды движется по горизонтали → и ширина контейнера почти всегда больше ширины рядов и выравнивание рядов сразу приобретает смысл.

    Это свойство мало где нужно и вместо него чаще используется align-items (см.ниже).

    • stretch (default) — ряды растягиваются заполняя строку полностью
    • flex-start — ряды группируются в верхней части контейнера (в конце может остаться место).
    • flex-end — ряды группируются в нижней части контейнера (место останется в начале)
    • center — ряды группируются по центру контейнера (место останется по краям)
    • space-between — крайние ряды прижимаются к краям (место между рядами распределяется равномерно)
    • space-around — свободное пространство равномерно распределяется между рядами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
    • space-evenly — тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

    меню

    Выравнивает элементы по поперечной оси внутри ряда (невидимой строки). Т.е. сами ряды выравниваются через align-content , а элементы внутри этих рядов (строк) через align-items и все это по поперечной оси. По главной оси такого разделения нет, там нет понятия рядов и элементы выравниваются через justify-content .

    • stretch (default) — элементы растягиваются заполняя строку полностью
    • flex-start — элементы прижимаются к началу ряда
    • flex-end — элементы прижимаются к концу ряда
    • center — элементы выравниваются по центру ряда
    • baseline — элементы выравниваются по базовой линии текста

    меню

    Для элементов контейнера

    Задает коэффициент увеличения элемента при наличии свободного места в контейнере. По умолчанию flex-grow: 0 т.е. никакой из элементов не должен увеличиваться и заполнять свободное место в контейнере.

    По умолчанию flex-grow: 0

    • Если всем элементам указать flex-grow:1 , то все они растянуться одинаково и заполнять все свободное место в контейнере.
    • Если одному из элементов указать flex-grow:1 , то он заполнит все свободное место в контейнере и выравнивания через justify-content работать уже не будут: свободного места нет выравнивать нечего.
    • При flex-grow:1 . Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
    • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
    • При flex-grow:3 . Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные
    Топ-пост этого месяца:  ЦБ будет блокировать финансовых мошенников в интернете

    Как это работает? Допустим, что контейнер имеет ширину 500px и содержит два элемента, каждый из которых имеет базовую ширину 100px. Значит в контейнере остается 300 свободных пикселей. Теперь, если первому элементу укажем flex-grow:2; , а второму flex-grow: 1; , то блоки займут всю доступную ширину контейнера и ширина первого блока будет 300px, а второго 200px. Объясняется это тем, что доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму.

    Заметка: в значении можно указывать дробные числа, например: 0.5 — flex-grow:0.5

    Задает коэффициент уменьшения элемента. Свойство противоположное flex-grow и определяет как элемент должен сжиматься, если в контейнере не остается свободного места. Т.е. свойство начинает работать, когда сумма размеров всех элементов больше чем размер контейнера.

    По умолчанию flex-shrink:1

    Допустим, что контейнер имеет ширину 600px и содержит два элемента, каждый из которых имеет ширину 300px — flex-basis:300px; . Т.е. два элемента полностью заполняют контейнер. Первому элементу укажем flex-shrink: 2; , а второму flex-shrink: 1; . Теперь уменьшим ширину контейнера на 300px, т.е. элементы должны сжаться на 300px чтобы находится внутри контейнера. Сжиматься они будут в соотношении 2:1, т.е. первый блок сожмется на 200px, а второй на 100px и новые размеры элементов станут 100px и 200px.

    Заметка: в значении можно указывать дробные числа, например: 0.5 — flex-shrink:0.5

    Устанавливает базовую ширину элемента — ширину до того как будут высчитаны остальные условия влияющие на ширину элемента. Значение можно указать в px, em, rem, %, vw, vh и т.д. Итоговая ширина будет зависеть от базовой ширины и значений flex-grow, flex-shrink и контента внутри блока. При auto элемент получает базовую ширину относительно контента внутри него.

    По умолчанию: auto

    Иногда лучше установить ширину элемента жестко через привычное свойство width . Например, width: 50%; будет означать, что элемент внутри контейнера будет ровно 50%, однако при этом все также будут работать свойства flex-grow и flex-shrink . Такое может быть нужно, когда элемент растягивается контентом внутри него, больше указанного во flex-basis. Пример смотрите в заметках.

    flex-basis будет «жестким», если обнулить растяжение и сжатие: flex-basis:200px; flex-grow:0; flex-shrink:0; . Все это можно записать так flex:0 0 200px; .

    Короткая запись трех свойств: flex-grow flex-shrink flex-basis .

    По умолчанию: flex: 0 1 auto

    Однако можно указать и одно, и два значения:

    Позволяет изменить свойство align-items , только для отдельного элемента.

    По умолчанию: от align-items контейнера

    • stretch — элемент растягиваются заполняя строку полностью
    • flex-start — элемент прижимаются к началу строки
    • flex-end — элемент прижимаются к концу строки
    • center — элемент выравниваются по центру строки

    baseline — элемент выравниваются по базовой линии текста

    Позволяет менять порядок (позицию, положение) элемента в общем ряду.

    По умолчанию: order: 0

    По умолчанию элементы имеют order: 0 и ставятся в порядке их появления в HTML коде и направления ряда. Но если изменить значение свойства order, то элементы будут выстраиваться в порядке значений: -1 0 1 2 3 . . Например если одному из элементов указать order: 1 , то сначала будут идти все нулевые, а потом элемент с 1.

    Так можно, например, первый элемент перекинуть в конец, при этом не меняя направление движения остальных элементов или HTML код.

    Чем отличается flex-basis от width?

    Ниже важные различия между flex-basis и width / height:

    flex-basis работает только для главной оси. Это значит что при flex-direction:row flex-basis контролирует ширину (width), а при flex-direction:column контролирует высоту (height). Смотрите пример.

    flex-basis применяется только к flex элементам. А значит если отключить flex у контейнера это свойство не будет иметь эффекта.

    Абсолютные элементы контейнера не участвуют во flex конструкции. А значит, flex-basis не влияет на элементы flex контейнера, если они абсолютны position:absolute . Им нужно будет указать width / height.

  • При использовании свойства flex 3 значения (flex-grow/flex-shrink/flex-basis) можно скомбинировать и записать коротко, а для width grow или shrink нужно писать отдельно. Например: flex:0 0 50% == width:50%; flex-shrink:0; . Иногда это просто неудобно.

  • По возможности все же отдавайте предпочтение flex-basis . Используйте width только когда не подходит flex-basis .

    Отличие flex-basis от width — баг или фича?

    Контент внутри flex элемента распирает его и не может выйти за его пределы. Однако если установить ширину через width или max-width , а не flex-basis , то элемент внутри flex контейнера сумеет выйти за пределы этого контейнера (иногда нужно именно такое поведение). Пример:

    Примеры Flex верстки

    В примерах нигде не используются префиксы для кроссбраузерности. Сделал я так для удобного чтения css. Поэтому примеры смотрите в последних версиях Chrome или Firefox.

    #1 Простой пример с выравниванием по вертикали и горизонтали

    Начнем с самого простого примера — выравнивание по вертикали и горизонтали одновременно и при любой высоте блока, даже резиновой.

    Или так, без блока внутри:

    #1.2 Разделение (разрыв) между элементами флекс блока

    Чтобы расположить элементы контейнера по краям и произвольно выбрать элемент после которого будет разрыв, нужно использовать свойство margin-left:auto или margin-right:auto .

    #2 Адаптивное меню на flex

    Сделаем меню в самом верху страницы. На широком экране оно должно быть справа. На среднем выравниваться по середине. А на маленьком каждый элемент должен быть на новой строке.

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #3 Адаптивные 3 колонки

    Этот пример показывает как быстро и удобно сделать 3 колонки, которые при сужении будут превращаться в 2 и затем в 1.

    Обратите внимание, что сделать это можно без использования media правил, все на flex.

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #4 Адаптивные блоки на flex

    Допустим нам нужно вывести 3 блока, один большой и два маленьких. При этом нужно чтобы блоки подстраивались под маленькие экраны. Делаем:

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #5 Галерея на flex и transition

    Этот пример показывает как быстро можно сделать симпатичный аккордеон с картинками на flex. Обратите внимание на свойство transition для flex.

    #6 Флекс во флекс (просто пример)

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

    Для решения этой задачи, сами блоки растягиваются флексом и им установлена максимально возможная ширина. Каждый внутренний блок также является флекс конструкцией, с повернутой осью flex-direction:column; и элемент в середине (где находится текст) растягивается flex-grow:1; чтобы заполнить всё свободное пространство, так достигается результат — текст начинался с одной линии.

    Еще примеры

    Поддержка браузерами — 98.3%

    Полной поддержки разумеется нет, однако все современные браузеры поддерживают flexbox конструкции. Для некоторых все еще нужно указывать префиксы. Для реальной картины заглянем в caniuse.com и видим, что без префиксов будут работать 96.3% используемых сегодня браузеров, с префиксами 98.3%. Это отличный показатель для того чтобы смело использовать flexbox.

    Чтобы знать какие префиксы актуальны на сегодня (июнь. 2020), приведу пример всех flex правил с нужными префиксами:

    Лучше если свойства с префиксами будут идти до оригинального свойства.
    В этом списке нет ненужных на сегодня (по caniuse) префиксов, но вообще префиксов больше.

    Chrome Safari Firefox Opera IE Android iOS
    20- (old) 3.1+ (old) 2-21 (old) 10 (tweener) 2.1+ (old) 3.2+ (old)
    21+ (new) 6.1+ (new) 22+ (new) 12.1+ (new) 11+ (new) 4.4+ (new) 7.1+ (new)
    • (new) — новый синтаксис: display: flex; .
    • (tweener) — старый неофициальный синтаксис 2011 года: display: flexbox; .
    • (old) — старый синтаксис 2009 года: display: box;

    меню

    Ну и не забывайте про видео, там порой тоже интересно и понятно. Вот парочка популярных:

    Полезные ссылки по Flex

    Flexplorer — наглядный конструктор flex кода.

    Полное руководство по CSS Grid

    CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).

    Введение

    CSS Grid Layout (aka «Grid») — это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке. CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), позиционирование и инлайновые блоки (inline-block), но все эти методы по существу являются просто хаками и опускают много важных функциональных возможностей (например, вертикальное выравнивание). Flexbox помог, но он предназначен для более простых одномерных макетов, а не для сложных двумерных (на самом деле Flexbox и Grid очень хорошо работают вместе). CSS Grid’ы — это первый модуль созданный специально для решения проблем компоновки, которые до сих пор мы решали с помощью хаков при создании сайтов. Есть две основные вещи, которые вдохновили меня на создание этого руководства. Первое, это замечательная книга от Rachel Andrew’s Get Ready for CSS Grid Layout. Это подробное и понятное введение в CSS Grid’ы, которое является основой для всей этой статьи. Я настоятельно рекомендую купить и прочитать его. Вторая вещь, которая меня вдохновила — это A Complete Guide to Flexbox (Полное руководство по Flexbox) от Chris Coyier’s, которая стала моим основным ресурсом по Flexbox. Она помогла большому количеству людей, о этом свидетельствует тот факт, что это лучший результат в поисковой выдаче при запросе»Flexbox» в Google. Вы увидите много похожего между этой статьей и моей, потому что почему бы не украсть у лучших?

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

    Основы и поддержка браузерами

    Для того чтобы начать работу, нам нужно определить элемент-контейнер с помощью display: grid, настроить размеры колонок и строк с помощью grid-template-columns и grid-template-rows, а также разместить его дочерние элементы внутри сетки с помощью grid-column и grid-row. Так же как и во Flexbox, порядок элементов в источнике сетки, не имеет значения (прим. переводчика: в HTML разметке). Ваш CSS может размещать их в любом порядке, что собственно упрощает перегруппировку сетки с помощью медиа запросов. Представьте, что вы определяете разметку всей страницы, а затем полностью переставляете её, чтобы разместить элементы под другую ширину экрана всего лишь с помощью нескольких CSS строк кода. CSS Grid — это один из самых мощных CSS модулей, представленных когда-либо. По состоянию на март 2020 года, многие браузеры уже поддерживают CSS Grid, без префиксов: Chrome (включая Android), Firefox, Safari (включая iOS), и Opera. Internet Explorer 10 и 11 поддерживают его но с реализацией более старого синтаксиса. Была анонсирована поддержка в Edge, но её пока нет.

    ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

    Всем привет, меня зовут Анна Блок и сегодня мы поговорим о разнице между Float, Flexbox и Grid. Также разберем, когда их уместнее всего использовать в CSS и возможно ли смешивать эти свойства для позиционирования элементов?

    Начнем с определений и короткой истории.

    Float

    Float — это свойство, которое позволяет определить по какой стороне будет выравниваться элемент. При этом остальные элементы будут обтекать объект со свойством Float с других его сторон. Используя float у вас есть возможность выбрать две стороны выравнивания — с правой стороны (right), либо с левой (left). Чтобы отменить позиционирование, для этого достаточно прописать float: none;

    Уместнее всего использовать float для обтекания картинки текстом. Однако, не так давно было принято верстать практически все на флоатах. Те, кто верстает уже более 3-х лет, наверняка, помнят, довольно распространенный метод верстки меню. Чтобы установить пункты меню в линию, каждому li присваивался float left или right для того, чтобы они шли друг за другом.

    Пример:

    В чем минус использования Float?

    Как я и сказала, все соседние блоки, стремятся стать обтекаемыми. Следовательно, чтобы избавиться от этого, требуется постоянно создавать лишний элемент в документе, которому бы присваивалось свойство clear: both;

    Давайте рассмотрим на примере.

    Здесь мы видим блоки, которые следуют друг за другом. Но у нас стоит задача: последний блок должен начинаться со следующей строчки. Чтобы это условие выполнялось, необходимо добавить блок с классом clear и стиль clear: both;

    Flexbox CSS

    На смену всем известным флоатам приходит Flexbox CSS. Он не был так широко известен, несмотря на то, что появился еще в 2011 году.

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

    Сейчас на данный момент ситуация кардинально изменилась. Flexbox CSS поддерживается всеми современными браузерами и не только. Верстальщики, которые перешли с флоатов на флексы почувствовали, что верстать стало гораздо быстрее и, что самое главное, приятнее.

    В чем преимущества Flex?

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

    Давайте рассмотрим пример:

    В этом примере мы видим родительский блок с классом box и дочерние элементы, которые окрашены в зеленый цвет и имеют ширину/высоту 100px. Чтобы поставить их в ряд, необходимо всего лишь установить display:flex;

    Если нам необходимо установить блоки по центру, то мы можем установить justify-content:center здесь же. В случае с float, такая реализация была бы невозможна (без костылей).

    Если наша цель растянуть один единственный блок и заполнить его по всей ширине контента, то мы можем добавить класс child для конкретного блока, например, четвертого и установить для него свойство flex-grow: 1;

    Чтобы ознакомиться со всеми свойствами Flexbox CSS, вы можете воспользоваться наглядной интерактивной шпаргалкой по всем свойствам. Обязательно держите ее под рукой, когда будете верстать сайт.

    Grid CSS

    Теперь давайте поговорим о новейшем направлении в верстке — Grid CSS. На мой взгляд, это результат переработоки всего того, с чем веб-разработчики встречались в течении 15-ти лет. Многие задачи решались методами, которые не предназначались для этого.

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

    Grid CSS предоставляет новые возможности:

    • Раскладка учитывает горизонтальное и вертикальное пространство одновременно;
    • Можно смело изменять раскладку, не затрагивая разметку;
    • Требуется минимальное количество медиазапросов, чтобы адаптироваться по свободному пространству.

    Flex CSS в свою очередь не может располагать элементы одновременно вдоль нескольких осей. С ним вы можете работать только в одномерном пространстве, а с Grid CSS — в двухмерном.

    Если вы только начинаете своё изучение этого направления, то я рекомендую пройти игру Grid CSS Garden. А для вёрстки сайтов используйте интерактивную шпаргалку по Grid.

    Давайте рассмотрим простой пример использования Grid:

    В этом примере мы видим простейшую разметку, где есть родительский блок с классом grid и дочерние — с классом grid-item. Для реализации такой сетки нам потребовалось использовать 4 свойства из раздела Grid CSS.

    Вместо заключения

    Итак, мы выяснили, в каких случаях уместнее использовать Float, Flexbox и Grid, но возможно ли их смешение? Давайте разберемся.

    Если вы начали, например, использовать display:flex , то конечно же писать там свойства, которые относятся к Grid неуместно. Это неправильно.

    Однако, если в одной части страницы блок выполнен полностью из Flexbox, а далее вам потребуется в следующем блоке сделать картинку, которая будет обрамляться текстом, то будет правильным использовать float.

    Пример:

    Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

    Как сверстать адаптивную flexbox галерею

    В этом уроке мы применим flexbox на практике и попробуем сверстать адаптивную галерею без media queries.

    Описание

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

    Описание

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

    Описание

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

    Описание

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

    Описание

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

    Описание

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

    Описание

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

    Описание

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

    Описание

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

    Описание

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

    Добавить комментарий