Макет сайта на флексбоксах


Содержание

Работа с flexbox

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

Как использовать Flexbox

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

Для этого необходимо определить родительский контейнер как display flex CSS :

Затем нужно установить размер дочерних элементов и с помощью margin: auto задать их равномерное распределение в пределах родительского контейнера:

Свойства родительского элемента flexbox

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

Свойства контейнера flexbox

Display

Свойство display позволяет определить div в качестве контейнера:

Flex-direction

CSS flex direction позволяет определить направление, в котором дочерние элементы будут распространяться ( четыре значения ):

  • row — слева направо;
  • row-reverse — справа налево;
  • column — сверху вниз;
  • column-reverse — снизу вверх.

Посмотреть пример слева направо
Посмотреть пример справа налево
Посмотреть пример сверху вниз
Посмотреть пример снизу вверх

flex-wrap

По умолчанию flexbox располагает дочерние элементы в одну строку. Но, изменив значение flex-wrap , можно разрешить их перенос на следующую строку:

  • nowrap — одна строка, слева направо;
  • wrap — несколько строк, слева направо;
  • wrap-reverse — несколько строк, справа налево.

Посмотреть пример несколько строк слева направо
Посмотреть пример несколько строк справа налево

flex-flow

Flex-flow позволяет объединить два описанных выше свойства в одно. Это сокращенное свойство, определяющее flex-direction и flex-wrap :

justify-content

Определяет, как размещаются внутри div контейнера дочерние элементы. Доступно пять различных значений этого свойства CSS flex :

  • flex-start — выравнивает элементы по началу контейнера;
  • flex-end — выравнивает элементы по концу контейнера;
  • center — выравнивает элементы по центру;
  • space-between — элементы размещаются с одинаковыми отступами друг от друга, первый элемент выравнивается по началу контейнера, последний элемент — по концу контейнера;
  • space-around — для элементов задаются одинаковые отступы со всех сторон.

Пример flex-start
Пример flex-end
Пример center
Пример space-between
Пример space-around

align-items

Align-items позволяет выровнять элементы по вертикальной оси. Доступно пять различных значений этого свойства CSS flex :

  • flex-start — выравнивает элементы по верху;
  • flex-end — выравнивает элементы по низу;
  • center — центрирует элементы по вертикали;
  • baseline — выравнивает элементы по базовому уровню;
  • stretch — растягивает элементы, чтобы они соответствовали размерам контейнера.

Пример flex-start
Пример flex-end
Пример center
Пример baseline
Пример stretch

align-content

Выравнивает контент и пространство между полями, когда контент перемещается на несколько строк. Доступно шесть значений этого свойства CSS flex 1 :

  • flex-start — несколько строк будут смещены к началу контейнера;
  • flex-end — несколько строк будут смещены к концу контейнера;
  • center — несколько строк будут размещены по центру;
  • space-between — для нескольких строк будет задано одинаковое расстояние между ними;
  • space-around — для нескольких строк будет задано одинаковое расстояние вокруг них;
  • stretch — несколько строк будут растягиваться, чтобы занять все пространство.

Свойства дочерних элементов flexbox

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

order

По умолчанию дочерние элементы размещаются в том же порядке, в котором они размещаются в DOM . Но с помощью свойства order можно изменить порядок блоков:

flex-grow

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

Например, если для всех элементов задано значение flex-grow 1 , а для одного элемента — 2, то он будет в два раза шире других элементов:

flex-shrink

Flex-shrink определяет, каким образом элементы будут сжиматься.

Реальные примеры

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

Меню навигации

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

Очень просто перейти к размерам на всю ширину экрана устройства, изменив способ, с помощью которого flexbox реагирует на изменения.

Посмотрите, как в приведенном выше примере элементы реагируют на различные размеры экрана. Ниже приведен код HTML и CSS , с помощью которых можно создать адаптивное меню навигации с использованием flexbox :

Столбцы одинаковой высоты

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

Посмотрите, как можно создать столбцы одинаковой высоты с помощью CSS flex 1 .

Код HTML и CSS , с помощью которых можно создать такой макет:

В этом коде CSS единственным свойством, которое нужно задать для получения одинаковых столбцов, является align-items: stretch :

Центрирование по вертикали

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

Но с помощью flexbox это делается еще проще. Для этого используются два свойства CSS flex1:justify-content и align-items .

Изменение порядка вывода элементов с помощью медиа-запросов

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

С помощью display flex CSS мы можем изменить порядок вывода различных разделов. Можно переместить блок основного контента перед левым сайдбаром.

Чтобы изменить порядок вывода дочерних элементов, нужно добавить для элемента свойство order и указать, на какой позиции он должен отображаться:

Теперь порядок размещения будет следующим:

  • Основной контент;
  • Заголовок;
  • Правая боковая панель;
  • Левая боковая панель;
  • Подвал.

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

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

Сейчас flexbox поддерживается в 88% браузеров:

  • Chrome 21+ поддерживает flexbox без префикса;
  • Firefox 22+ поддерживает flexbox без префикса;
  • Safari поддерживает flexbox с префиксом – webkit ;
  • Opera 12.1+ поддерживает flexbox без префикса;
  • IE 10 поддерживает flexbox с префиксом -MS , но уже IE11 поддерживает flexbox без префикса.

Баги flexbox

На Github существует проект со списком ошибок CSS flex и способами, как их можно обойти, пока проблема не будет устранена в движках браузеров.

Данная публикация представляет собой перевод статьи « How To Get Started With CSS Flexbox » , подготовленной дружной командой проекта Интернет-технологии.ру

Flexbox генератор

.flex-container<

.flex-item- <

Использование Flexbox генератора

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

Также для удобства восприятия и понимания свойства flex-direction , были добавлены две оси за границей блока рабочей поверхности. Главная ось обозначена зеленым цветом, а поперечная красным . Данные оси изменяют своё направление при изменении свойства flex-direction , что вызывает соответствующее изменение направления внутренних блоков.

Понравилась статья? Расскажите о ней друзьям!

  • © Meliorem, 2015 — 2020
  • Все права защищены

Копирование материалов сайта, без разрешения правобладателя, запрещено!

Flexbox Templates

These website layout templates are built using CSS Flexbox Layout.

See the flexbox tutorial to learn how flexbox works.

Website Layout 1

Website Layout 2

Website Layout 3

Website Layout 4

Holy Grail Layout 1

This template only uses flexbox on the middle bit (the header and footer use block layout).

Holy Grail Layout 2

This template uses nested flex containers so that the whole layout uses flexbox.

12 Column Grid 1

12 Column Grid 2

Vertical 12 Column Grid 1

Vertical 12 Column Grid 2

Note that the templates on this page contain embedded style sheets. It is best to transfer these styles to an external style sheet if you plan to use the same styles across multiple pages (for example, a whole website).

Customize Your Template

Here are a few ways you can modify your HTML template.

  • Add some free graphics to your template.
  • Modify your template or simply add content with these HTML codes. Simply copy/paste them into your template.
  • Check out these HTML examples for more >

Верстка на flexbox.

Верстка на flexbox.

Здравствуйте! Сегодня в продолжении темы верстки страницы я хотел бы рассказать о FlexBox. Модуль Flexbox-верстки (flexible box — «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и / или динамический (отсюда слово «гибкий»).

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

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

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

Если обычный макет основывается на направлениях потоков блочных и инлайн-элементов, то flex-макет основывается на «направлениях flex-потока».

Flexbox

В основном элементы будут распределяться или вдоль главной оси (от main-start в main-end), или вдоль поперечной оси (от cross-start в cross-end).

main-axis — главная ось, вдоль которого располагаются flex-элементы. Обратите внимание, она обязательно должна быть горизонтальной, все зависит от качества justify-content.
main-start | main-end — flex-элементы размещаются в контейнере от позиции main-start позиции main-end.
main size — ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, или высотой элемента.
cross axis — поперечная ось, перпендикулярная главной. Ее направление зависит о тнаправления главной оси.
cross-start | cross-end — flex-строки заполняются элементами и размещаются в контейнере от позиции cross-start и позиции cross-end.
cross size — ширина или высота flex-элемента в зависимости от выбранной размерности равна этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности.

Свойства
display: flex | inline-flex;

Применяется до родительского элемента flex-контейнера.

Определяет flex-контейнер (инлайновий или блочный зависимости от выбранного значения), подключает flex-контекст для всех его непосредственных потомков.

display: other values ​​| flex | inline-flex;

CSS-столбце columns не работают с flex-контейнером float, clear и vertical-align не работают с flex-элементами

flex-direction

Применяется до родительского элемента flex-контейнера.

Устанавливает главную ось main-axis, определяя тем самым направление для flex-элементов, размещаемых в контейнере.

flex-direction: row | row-reverse | column | column-reverse

row (по умолчанию): слева направо для ltr, справа налево для rtl;
row-reverse: справа налево для ltr, слева направо для rtl;
column: аналогично row, сверху вниз;
column-reverse: аналогично row-reverse, снизу вверх.

flex-wrap

Применяется до родительского элемента flex-контейнера.

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

flex-wrap: nowrap | wrap | wrap-reverse

nowrap (по умолчанию): однострочный / слева направо для ltr, справа налево для rtl;
wrap: многострочный / слева направо для ltr, справа налево для rtl;
wrap-reverse: многострочный / справа налево для ltr, слева направо для rtl.

flex-flow

Применяется до родительского элемента flex-контейнера.

Это сокращение для свойств flex-direction и flex-wrap, вместе определяют главную и поперечную оси. По умолчанию принимает значение row nowrap.

||»>flex-flow || «>

justify-content

Применяется до родительского элемента flex-контейнера.

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

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start (по умолчанию): элементы сдвигаются к началу строки;
flex-end: элементы сдвигаются до конца строки;
center: элементы выравниваются на середину строки;
space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце)
space-around: элементы распределяются равномерно с равным расстоянием между собой и вне строки.

Применяется до родительского элемента flex-контейнера.

Определяет поведение по умолчанию для того, как flex-элементы располагаются относительно поперечной оси на текущей строке. Считайте это версии justify-content для поперечной оси (перпендикулярной к основной).

align-items: flex-start | flex-end | center | baseline | stretch

flex-start: граница cross-start для элементов расположен позиции cross-start;
flex-end: граница cross-end для элементов расположен позиции cross-end;
center: элементы выравниваются по центру поперечной оси;
baseline: элементы выравниваются по своей базовой линии;
stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учетом min-width / max-width).

Применяется до родительского элемента flex-контейнера. Выравнивает строки flex-контейнера при наличии свободного места на поперечной оси аналогично тому, как это делает justify-content на главной оси. Примечание: это свойство не работает с однострочными flexbox.

align-content: flex-start | flex-end | center | space-between | space-around | stretch

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

align-content
order

Применяется до дочернему элементу / flex-элемента.

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

flex-grow

Применяется до дочернему элементу / flex-элемента. Определяет для flex-элемента возможность «расти» при необходимости. Принимает безразмерное значение, служит в качестве пропорции. Оно определяет, какую долю свободного места внутри контейнера элемент может занять. Если во всех элементов свойство flex-grow задано как 1, то каждый потомок получит внутри контейнера одинаковый размер. Если вы задали одному из потомков значение 2, то он займет в два раза больше места, чем другие.

(за замовчуванням 0) «>flex-grow (по умолчанию 0)

Отрицательные числа не принимаются.
flex-shrink

Применяется до дочернему элементу / flex-элемента.

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

(default 1) «>flex-shrink (default 1)

Отрицательные числа не принимаются.
flex-basis

Применяется до дочернему элементу / flex-элемента. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере.

|»>flex-basis | auto (default auto)

flex

Применяется до дочернему элементу / flex-элемента. Это сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink, flex-basis) необязательны. Значение по умолчанию — 0 1 auto.

align-self

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

align-self: auto | flex-start | flex-end | center | baseline | stretch

Примеры
Начнем с очень-очень простого примера, встречается практически ежедневно: выравнивание точно по центру. Нет ничего проще, если использовать flexbox.

Этот пример основывается на том, что margin под flex-контейнере, заданный как auto, поглощает лишнее пространство, поэтому задача отступления таким образом выровняет элемент ровно по центру по обеим осям.Теперь давайте используем какие-то свойства. Представьте набор из 6 элементов фиксированного размера (для красоты), но с возможностью изменения размера контейнера. Мы хотим равномерно распределить их по горизонтали, чтобы при изменении размера окна браузера все выглядело хорошо (без @media-запросов!).

.flex-container <
/ * Сначала создадим flex-контекст * /
display: flex;

/ * Теперь определим направление потока и хотим ли мы, чтобы элементы
переносились на новую строку
* Помните, что это тоже самое, что и:
* Flex-direction: row;
* Flex-wrap: wrap;
* /
flex-flow: row wrap;

/ * Теперь определим, как будет распределяться пространство * /
justify-content: space-around;
>

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

/ * Большие экраны * /
.navigation <
display: flex;
flex-flow: row wrap;
/ * Сдвигает элементы к концу строки по главной оси * /
justify-content: flex-end;
>

/ * Экраны среднего размера * /
media all and (max-width: 800px) <
.navigation <
/ * Для экранов среднего размера мы выравниваем навигацию по центру,
равномерно распредляя свободное место между элементами * /
justify-content: space-around;
>
>

/ * Маленькие экраны * /
media all and (max-width: 500px) <
.navigation <
/ * На маленьких экранах вместо строки мы располагаем элементы в столбце * /
flex-direction: column;
>
>

Давайте поиграем с гибкостью flex-элементов! Как насчет ориентированного на мобильные устройства трёхколоночного макета с полноширинной шапкой и подвалом? И другим порядком расположения.

.wrapper <
display: flex;
flex-flow: row wrap;
>

/ * Задаем всем Элеметы ширину в 100% * /
.header, .main, .nav, .aside, .footer <
flex 1100%;
>

/ * В этом случае мы полагаемся на исходный порядок для ориентации на
* Мобильные устройства:
* 1 header
* 2 nav
* 3 main
* 4 aside
* 5 footer
* /

/ * Экраны среднего размера * /
media all and (min-width: 600px) <
/ * Оба сайдбара располагаются в одной строке * /
.aside
>

/ * Большие экраны * /
media all and (min-width: 800px) <
/ * Мы меняем местами элементы .aside-1 и .main, а также сообщаем
* Элемента .main забирать в два раза больше места, чем сайдбаре.
* /
.main

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Flexbox несколько полезных примеров для работы

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

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

Создание столбцов с одинаковой высотой

Сначала это может выглядеть довольно простым, но эта задача иногда способна раздражать. Использование min-height не сработает, потому как с появлением некоторого контента размер столбцов сразу же начнёт изменяться.

Устранение этой проблемы с помощью flexbox также не является решением, поскольку столбцы, созданные с flexbox CSS, будут изначально иметь равную длину. Нам всего лишь необходимо ввести «подвижную» модель, а затем удостовериться, что свойства flex-direction и align-items заданы правильно.

Чтобы увидеть демонстрацию этого приёма, вы можете перейти к статье «Самый простой способ создать столбцы равной высоты».


Перестановка элементов

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

Свойство order , которое позволяет использовать flexbox-вёрстка, говорит само за себя. Оно даёт нам изменять любое количество «гибких» элементов и их последовательность. Единственным параметром этого свойства является целое число, которое определяет положение этого элемента, чем больше числа – тем выше приоритет данного элемента.

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

Горизонтальное и вертикальное центрирование

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

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

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

Создание полностью адаптивных сеток

Многие вебмастера уповают на различные CSS библиотеки и фреймворки, создавая адаптивные сетки. Самым распространённым инструментом в данной области является Bootstrap. Однако, и он не единственный в своём роде. Подобных помощников разработаны уже сотни. Все они относительно неплохо функционируют и могут похвастаться внушительным набором опций, но от одной проблемы им не избавиться никогда – это громоздкость. Следовательно, если вы человек, который любит всё делать самостоятельно, либо просто не желаете ради сетки ставить целый фреймворк, то flexbox-вёрстка выручит вас!

Строка в flexbox сетке – это просто контейнер. Горизонтальными столбцами внутри него может быть любое количество элементов, размер которых задаётся через flex . Такая модель адаптируется к размеру любого экрана, поэтому конечный результат должен выглядеть хорошо на большинстве устройств. Тем не менее если мы решим, что на экране недостаточно места на горизонтальной плоскости, то макет можно просто превратить в вертикальный с медиа-запросом.

Вы можете убедиться в вариативности этого приёма в инструкции: Самый простой способ создания респонсивного заголовка.

Создание зафиксированного подвала

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

Применение display: flex к тегу body позволит нам использовать «гибкий режим» при построении всего макета. Когда всё будет готово, то основная часть страницы будет являть одним «гибким» элементом, а подвал другим, это упростит манипулирование их позициями.

Вы найдёте больше информации о данной технике в статье «Лучший путь создания закреплённого подвала».

Заключение

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

Надеюсь, что эта статья оказалась полезной для вас и улучшила ваш уровень владения CSS. Удачи!

Flexbox: новый принцип CSS верстки макетов

Flexbox это совершенно новый набор CSS свойств, который позволяет верстальщикам создавать гибкие макеты для сайтов. Он отлично подходит для так называемых отзывчивых макетов, потому что резко снижает сложность верстки. Современные браузеры (включая IE10+, мобильные браузеры iOS и Andrioid) уже поддерживают Flexbox, так что если вы еще не слышали о Flexbox, то самое время, чтобы изучить.

Flexbox готов к использованию

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

Действительно, CSS верстка и позиционирование элементов на странице являются одними из самых сложных понятий для верстальщиков, независимо от их опыта. Для верстки они используют такие свойства как float , clear , display: block , display: inline для верстки макетов своих сайтов. Но теперь, с новым CSS свойством display: flexbox можно задавать направление, расположение, и промежутки между элементами страницы.

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

Использование Flexbox и его свойства

Объединение Flexbox и CSS медиа запросы (media queries) является мощным инструментом. В примере ниже я сделал упрощённую версию главной страницы сайта Treehouse, использую современный подход mobile-first и flexbox. Откройте этот пример и поизменяйте размер окна браузера.

На первый взгляд может показаться что в примере нет ничего особенного, но если взглянуть на код, то можно увидеть, что верстка выполнена без использования свойства float: left или float: right . Не используются также свойства display: block или display: inline .

Свойство DISPLAY: FLEX

Свойство display: flex применяется к родительскому контейнеру, который становится «гибким контейнером» (flex-контейнер), а так же все его прямые потомки являются «гибкими элементами» (flex элементы). Гибкий контейнер имеет главную ось, которая задаёт основное направление для своих прямых потомков (гибких элементов). Поперечная ось перпендикулярна главной оси. Обе эти оси имеют набор свойств с помощью которых можно управлять расположением гибких элементов по отношению друг к другу в контейнере.

Так же можно создавать вложенные flex-контейнеры, как я сделал в примере выше, т.к. свойство display: flex не наследуется. Блокам с классами .header и .nav назначено свойство display: flex . Это похоже на реализацию строк и столбцов в CSS фреймворке Foundation.

Примечания:

  • CSS-столбцы columns не работают с flex-контейнером.
  • float , clear и vertical-align не работают с flex-элементами

Свойство FLEX-DIRECTION

  • row (по умолчанию): слева направо для ltr, справа налево для rtl;
  • row-reverse: справа налево для ltr, слева направо для rtl;
  • column: аналогично row, сверху вниз;
  • column-reverse: аналогично row-reverse, снизу вверх.

Свойство flex-direction задаёт направление главной оси. Главная ось определяет направление и не обязательно горизонтальное, например при просмотре на мобильных браузерах все элементы контейнера (flex item) группируются в 1 колонку друг за другом. Это задаётся с помощью flex-direction: column . Чтобы элементы контейнера располагались в горизонтальном направлении достаточно задать flex-direction: row .

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

Свойство FLEX

Значение по умолчанию: flex: 0 1 auto .

Свойство flex применяется для элементов flex-контейнера. Это короткая запись, с помощью которой можно задать сразу несколько отдельных свойств: flex-grow , flex-shrink и flex-basis .

Свойства flex-grow и flex-shrink определяют сколько места будет занимать каждый элемент flex-контейнера по отношению друг к другу. По умолчанию flex-grow: 0 , а flex-shrink: 1 . Это означает, что все элементы будут пропорциональны друг к другу.

Свойство flex-basis определяет размеры элементов, чтобы заполнить всё пространство flex-контейнера. Значение этого свойства — auto.

Последние 2 свойства flex-shrink и flex-basis не обязательны. В примере выше, я установил значение flex: 1 для блока с классом .nav , что одно и тоже если прописать ему flex-grow: 1 . Другим flex-элементом в контейнере .header является элемент h1 с классом .logo , для которого установлено flex-grow: 0 , поэтому элемент .nav будет всегда занимать больше места чем элемент .logo .

Свойство JUSTIFY-CONTENT

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

  • flex-start (по умолчанию): элементы сдвигаются к началу строки;
  • flex-end: элементы сдвигаются к концу строки;
  • center: элементы выравниваются по центру строки;
  • space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце);
  • space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки.

Иллюстрация работы свойства justyfy-content:

В моём примере, блоку с классом .header я прописал значение justify-content: space-between . Это означает, что первый элемент flex-контейнера будет располагаться в начале main start (см. изображение в главе Свойство DISPLAY: FLEX), а последний элемент будет располагаться в конце main end. Все элементы flex контейнера которые находятся между первым и последним будут распределены равномерно.

Для элемента с классом .nav я применил свойство justify-content: space-around для распределения всего пространства равномерно с отступами вокруг каждого элемента flex-контейнера.

В заключении

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

Вёрстка с помощью CSS Flexbox

В этой статье познакомимся с технологией CSS Flexbox, предназначенной для создания гибких макетов веб-страниц.

Назначение CSS Flexbox

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

CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования.

Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.

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

CSS Flexbox поддерживается всеми используемые на сегодняшний момент современными браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Основы CSS Flexbox

Создание CSS разметки с помощью Flexbox начинается с установки необходимому HTML элементу CSS-свойства display со значением flex или flex-inline .

После этого данный элемент становится flex-контейнером , а все его непосредственные дочерние элементы flex-элементами . При этом когда мы говорим о flexbox то подразумеваем только элемент с display:flex или display:flex-inline и все элементы непосредственно расположенные в нём. Т.е. в CSS Flexbox всего 2 типа элементов: flex-контейнер и flex-элемент.

Структура flexbox сетки

По умолчанию flex-элементы во flex-контейнере занимают всю его высоту.

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

Устройство flex-контейнера. Направление осей

На рисунке представлена схема устройства flex-контейнера:

Направление расположение flex-элементы в flex-контейнере определяется посредством осей.

В CSS Flexbox имеются две оси. Первая ось называется главной (по умолчанию она направлена слева направо). Вторая — поперечная (по умолчанию направлена сверху вниз), она всегда перпендикулярно главной .

По умолчанию элементы во flex-контейнере располагаются вдоль направления главной оси (т.е. слева направо) на одной линии.

Направление главной оси можно изменить, осуществляется это с помощью CSS-свойства flex-direction .

С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не рядами (rows), а колонками (columns).

CSS Flexbox — Расположение элементов при установке свойству flex-direction значения column, а flex-wrap — wrap

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

Расположение элементов в контейнере по умолчанию (flex-элементы, которым не хватает места во flex-контейнере, вылезают за его пределы)

Но это можно изменить. Разрешить перенос flex-элементов на новые линии осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap со значением wrap или wrap-reverse .

Значения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси .

Свойства flex-direction и flex-wrap можно указать с помощью универсального CSS свойства flex-flow :

Выравнивание flex-элементов

Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).

Выравнивание flex-элементов по направлению главной оси

Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства justify-content :

Варианты выравнивания flex-элементов вдоль главной оси

Выравнивание flex-элементов вдоль поперечной оси

Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства align-items :

Варианты выравнивания flex-элементов вдоль поперечной оси

Выравнивание линий flex-контейнера

CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.

Варианты выравнивания линий flex-контейнера

Свойство align-content имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства flex-wrap значение wrap или wrap-reverse .

CSS-свойство align-self

Свойство align-self в отличие от предыдущих ( justify-content , align-items и align-content ) предназначено для flex-элементов. Оно позволяет изменить выравнивание flex-элемента вдоль направления поперечной оси. Свойство align-self может принимать такие же значения как align-items .

Как работает CSS свойство align-self

Изменение порядка следования flex-элементов

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

Как работает CSS свойство order

Управление шириной flex-элемента

Во Flexbox есть несколько CSS свойств, определяющих то, какая ширина может быть у flex-элемента.

CSS-свойство flex-basis

Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение auto (в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).

Конечная ширина flex-элемента будет определяться в зависимости от значений CSS-свойств flex-grow и flex-shrink , которые установлены не только для этого элемента, но и для других flex-элементов этого flex-контейнера.

CSS-свойство flex-grow

Это свойство определяет, может ли начальная ширина flex-элемента увеличиваться (расти). Увеличение ширины flex-элемента осуществляется за счёт свободного пространства линии. В качестве значения CSS-свойства flex-grow указывается целое число. Именно это значение и определяет (если оно больше или равно 1) какую часть свободного пространства flex-элемент заберёт себе.

Как работает CSS свойство flex-grow

В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):

  • к ширине элемента .flex-container_element-1 добавится 1/5 часть этого пространства (120×1/5=24px);
  • к ширине элемента .flex-container_element-2 добавится 4/5 части этого пространства (120×4/5=96px).

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

По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).

CSS-свойство flex-shrink

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

Как работает CSS свойство flex-shrink

Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента ( .flex-container_element-1 и .flex-container_element-2 ). Ширина первого flex-элемента .flex-container_element-1 в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента .flex-container_element-2 в данном случае составит 300 – 3/4*100= 225px.

Значение по умолчанию:

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

CSS-свойство flex

Для удобной установки flex-grow , flex-shrink и flex-basis можно использовать CSS свойство flex .

Значение по умолчанию:

Верстка макета страницы на CSS Flexbox

В этом разделе создадим простой адаптивный макет на Flexbox.

Структура макета будет состоять из 3 секций:

  • header (для вывода заголовка и основного меню);
  • main (для отображения основной части);
  • footer (для футера).

Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально ( max-width .

Для «превращения» блока во flex-контейнер будем использовать класс row-flex . Установку ширины каждому flex-элементу ( main_article и main_aside ) внутри flex-контейнера будем осуществлять с помощью CSS-свойства flex .

Макет веб-страницы на Flexbox

В качестве примера разметим посредством Flexbox ещё блок «Футер» и секцию раздела main-article «Интересненькое на сайте».

Секцию «Футер» разделим на 4 равные части (минимальная ширина одной части — 200px), а «Интересненькое на сайте» на 3 части (минимальная ширина одной части — 300px).

Вёрстка на Flexbox в CSS. Полный справочник

update 25.07.19 Долго и постепенно, на протяжении года находил и переводил статьи по больным темам при работе с CSS Flexbox и решил обновить статью, исправив и дополнив некоторые моменты, добавив подробные разъяснения на каждый момент. К тому же добавил подробные объяснения некоторых методик при использовании Flexbox

В этой статье вы узнаете буквально все свойства модуля Flexbox и даже больше — вы сможете посмотреть на примерах, как высчитываются и работают самые сложные из них, конечно же, параллельно увидев полное объяснение каждого. Эта статья является переводом самой последней версии статьи — A Complete Guide to Flexbox. В интернете конечно есть другие переводы, но они либо для старых версий, либо в некоторых моментах, с неправильным переводом, а есть и частичные переводы, вырванные из контекста всего руководства.

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

Введение

Flexbox разметка в CSS даёт один из наиболее эффективных способов расстановки, выравнивания и распределения места между элементами внутри контейнера, даже если их размер неизвестен или динамичен (собственно, по этому его и называют flex, от слова flexible, что по-английски имеет двойственное значение — гибкий и уступчивый, что очень сочетается с моделью поведения flexbox).

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

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

Учтите, что Flexbox лучше всего подходит для компонентов в приложении и для не масштабных шаблонов. Существует Grid модель разметки, которая предназначена для работы с большими шаблонами и комплексными приложениями. Именно этот момент очень хорошо и доступно расписан в статьях — Решающая CSS битва: Grid против Flexbox и Когда нужно использовать Flexbox

Создание адаптивной галереи изображений с помощью Flexbox

Создание HTML

Во-первых, давайте создадим HTML. Это будет простой div-контейнер, который включает в себя несколько тегов img. Изображения берутся рандомно с сайта loremflickr.com (на котором находятся случайные картинки с сервиса Flickr), при этом можно задавать для них размер (обратите внимание на адрес картинок src, через косую черту задается их ширина и высота) . Обратите внимание, что, поскольку мы случайным образом генерируем изображения, они будут меняться при каждой перезагрузке браузера.

Класс .container нужен для контейнера flex, тогда как класс .item будет содержать элементы flex.

Вот как выглядит эта галерея, без использования CSS

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

Добавим базовый сброс стилей

Чтобы удалить стили браузера по умолчанию, нужно применить сброс стилей. Он будет включать только те HTML-элементы, которые понадобятся для галереи (html, body, div, img).

Помимо этого добавим ко всем элементам свойство box-sizing: border-box , чтобы отступы и границы были включены в общую ширину и высоту элементов. Рекомендуют использовать это правило для flexbox, так как в противном случае отступы и границы могут исчезнуть в конце строк.

Создание макета Flexbox

Создание макета flexbox довольно просто, достаточно добавить одну строку кода. Нам только нужно задать для контейнера flex(в данном случае это div с классом .container ) свойство display:flex.

Ниже можно увидеть, как теперь выглядит галерея изображений: все картинки укладываются в один ряд. Браузер адаптировал ширину и высоту изображений к размеру окна просмотра. Если изменить размер окна браузера, то видно, что теперь изображения становятся адаптивными. Они увеличиваются и сжимаются в соответствии с имеющимся пространством.

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

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

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

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

На самом деле, этот макет очень похож на тот, с которого мы начали, перед добавлением CSS. Однако с flexbox изображения полностью адаптивные — вы можете проверить его, изменив размер окна браузера. Еще одно преимущество заключается в том, что теперь изображения (элементы класса item ) можно легко расположить по-разному.

Добавление полей вокруг элементов flex.

Прежде чем обратить внимание на выравнивание, давайте добавим поля вокруг изображений, а также добавим 5px отступы padding вокруг контейнера flex.

Выравнивание изображений

Режим верстки flexbox позволяет выровнять элементы flex несколькими различными способами, с помощью свойства CSS justify-content . Его значением по умолчанию является flex-start, который распределяет элементы flex от начала до конца строки.

Однако, мы можем также распределить изображения в противоположном направлении используя значение flex-end . Это может быть особенно полезно, если нужно поддерживать RTL (справа налево) языки:

В результате картинки будут расположены таким образом:

Свойство justify-conten t может принимать еще три, реже используемых на практике, значения. Если вы их используете, не забывайте выполнять проверку, изменяя размер окна браузера, чтобы знать как ваша галерея изображений ведет себя при разных размерах окна просмотра.

Значение space-between прикрепляет первый элемент к началу строки, а последний — к концу:

Когда задано значение space-around, изображения flex равномерно распределяются в ряду, а пространство перед первым элементом и после последнего элемента равно половине пространства между соседними изображениями:

Наконец, когда указано значение space-evenly, элементы распределяются так чтобы расстояние между двумя соседними изображениями и пространство перед первым и после последнего изображения были равны :

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

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

Поддержка flexbox браузерами в наши дни довольно хороша — он полностью работает со всеми современными браузерами, включая мобильные браузеры и частично с Internet Explorer 11.

FlexBox верстка блока с комментариями

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

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

Немного теории

Перед тем как начать знакомиться с примерами из статьи, хотелось бы сделать небольшое теоретическое отступление. Итак, во FlexBox верстке участвую 2 типа элементов: контейнер и элементы, входящие в него и являющиеся его потомками.

Внутри контейнера существуют 2 оси: основная (main axis) и кросс-ось (cross axis), которая расположена перпендикулярно основной оси.

Элементы внутри контейнера выстраиваются, как правило, сначала по основной оси, а уже потом по кросс-оси.

Какие правила CSS мы собираемся использовать

CSS-правила из спецификации по FlexBox также можно разделить на 2 группы: одни применяются к flex-контейнеру (гибкому контейнеру), другие — к flex-элементам (гибким элементам).

Итак, давайте рассмотрим некоторые CSS-свойства, используемые при создании FlexBox верстки:

  • display: flex — применяется к контейнеру. Активирует flex режим и заставляет элементы, находящиеся внутри контейнера следовать правилам FlexBox. Варианты значений: flex | inline-flex .
  • justify-content — это свойство применяется к контейнеру. Оно определяет по какой стороне будут выравнены элементы (варианты значений: flex-start | flex-end | center | space-between | space-around . Работает аналогично CSS-свойству text-align ). Подробности о свойстве justify-content ;
  • order — применяется к элементам, находящимся внутри контейнера. order позволяет контролировать порядок расположения элементов внутри контейнера (по-умолчанию они отображаются в таком же порядке, как расположены в коде страницы). Мы будем использовать это мощный инструмент в нашем блоке с комментариями для размещения рядом текста и изображений. Подробности о свойстве order ;
  • flex-wrap — правило применяется к контейнеру (варианты значений: nowrap | wrap | wrap-reverse ). По-умолчанию, элементы в контейнере выстраиваются по одной линии. С помощью правила flex-wrap вы можете изменить поведение элементов в контейнере, позволив им перестраиваться ниже, образуя еще одну линию. Значения правила учитывают направление элементов. Подробности о правиле flex-wrap ;

Макет

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

  • Каждый комментарий должен состоять из: аватара и имени комментатора, времени добавления и текста комментария;
  • В блоке с комментариями должно быть 2 вида комментариев: первый — написанный автором (окрашен в бледно-зеленый цвет и расположен справа), второй вид: все остальные, написанные посетителями;
  • Структура HTML-разметки обоих видов комментариев должна быть по возможности похожей;
  • Верстка должна быть адаптивной;

Макет раздела с комментариями

Используя FlexBox, все это можно реализовать с помощью нескольких строк CSS-кода.

Итак, давайте перейдем к делу!

Структура HTML-кода довольно проста. Она включает в себя простой список комментариев и форму для добавления новых комментариев, расположенную под списком.

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

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

Сначала, нужно присвоить элементу, в котором хранится комментарий, CSS-правило display: flex; . После этого мы сможем применять FlexBox CSS к комментариям и их потомкам.

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

В результате их применения блок с комментариями будет выглядеть следующим образом:

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

Как вы можете видеть, с помощью FlexBox, процесс верстки становится легче.

Изменение порядка элементов

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

Мы будем использовать media-запросы (media-queries) для того чтобы растянуть блоки с комментариями на всю ширину экрана мобильного устройства. Также необходимо передвинуть аватарку и информацию о комментаторе под блок с текстом комментария. Для этого используя правило flex-wrap со значением wrap .

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

Блок с комментариями на экране мобильного устройства

Заключение

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

Если вам интересно получить дополнительную информацию о FlexBox, предлагаем вам несколько ресурсы, которые могут быть вам полезны:

  • Список CSS-трюков, связанных с FlexBox
  • Углубленная статья на MDN
  • Простое решение классических CSS-задач с помощью FlexBox

При написании статьи использовались следующие ресурсы:

Илон Маск рекомендует:  Asp новые возможности asp
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL