Просмотров: 7 565

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

Весь мой курс по Flexbox


В последнее время все большую популярность набирает такой инструмент CSS, как Flexbox. Давайте попробуем разобраться, что же это такое и зачем это нужно.

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

Звучит несколько непонятно, правда? Прочитайте эту статью до конца и многое прояснится.

Т.е. Flexbox — это всего лишь один из модулей CSS (каскадных таблиц стилей). Для чего же этот модуль нужен?

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

Например, посмотрите на изображение ниже. Вы можете увидеть на нем 4 блока (колонки) в которых содержатся текст и изображения.

Каким образом, можно реализовать подобный эффект верстки нескольких колонок?

Во первых, можно воспользоваться свойством CSS float. Во вторых, можно воспользоваться свойством position. И третий вариант — это воспользоваться модулем Flexbox.

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

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

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

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

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

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

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

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

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

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

Что касается поддержки модуля flexbox браузерами, вы можете перейти по этой ссылке:

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

и убедиться в том, что в настоящий момент более 90% браузеров успешно работают с flexbox.

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

Flexbox все более и более набирает свою популярность и со временем, какие-то старые методы верстки веб-страниц будут уходить и flexbox заменит это.

Вот такая вводная информация по поводу модуля CSS flexbox, если будут вопросы, пишите в комментариях.