Что такое flexbox в CSS и зачем это нужно.

В этом видео давайте остановимся на таком удобном и полезном инструменте технологии CSS как Flexbox (флексбоксы). 

Что это такое и зачем это нужно?

Наверняка, вы столкнетесь с этим, как только дойдете до вопроса позиционирования элементов на странице. 

Начнем с того, что Flexbox - это сокращенная форма записи от (Flexible Box Layout Module) или модуль макета гибкого контейнера. Звучит несколько непонятно, но давайте будем разбираться.

Т.е. flexbox - это всего лишь один из модулей каскадных таблиц стилей CSS. 

Для чего он может быть нужен?

Основная задача Flexbox - это позиционирование элементов.

Если вы видите какие-то элементы на веб-странице, которые размещаются в несколько колонок, можно воспользоваться несколькими способами, как это можно реализовать.

1) Можно воспользоваться свойством CSS Float.

2) Можно воспользоваться CSS свойством Position.

3) Либо мы можем воспользоваться Flexbox.

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

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

+ Свойства float и position очень плохо работают с высотой блоков. Довольно сложно добиться одинаковой высоты колонок, если в них находится разное количество содержимого.

Для решения этой задачи нужно прибегать к каким-то хитростям и "костыльным" решениям.

+ Выравнивание по вертикали.

Стандартные методы очень плохо работают с вертикальным позиционированием.

+ Стандартные методы для позиционирования элементов требуют добавления в исходный код дополнительных элементов разметки документа, которые не несут какой-либо смысловой нагрузки. Лишние свойства CSS вроде clear, которое требуется для работы свойства float.

Свойство float, в первую очередь, отвечает за обтекание элементов, а не за их позиционирование на веб-странице.

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

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

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

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

По поводу поддержки Flexbox различными браузерами. Это можно проверить по этой ссылке:

https://caniuse.com/#search=flexbox

Более 90% всех браузеров работает с Flexbox. Т.е. более 90% посетителей вашего сайта будут видеть вашу страницу так, как вы это и задумали.

Flexbox все больше и больше набирает популярность и со временем они должны полностью вытеснить все старые методы верстки веб-страниц.

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