Но ведь работает же! – первое, что услышите от любителей устаревших технологий. Спорить с ними или нет – каждый решает для себя сам, но вот разобраться в сути стоит точно. И так ли хороши современные технологии? К концу статьи точно придем к единому мнению. Сегодня мы поговорим о разнице между Float и Flexbox. Также разберем, когда их уместнее всего использовать и возможно ли смешивать эти свойства для позиционирования элементов? Давайте познакомимся с любимой многими технологией позиционирования float. Несколько лет назад это был действительно удобный способ быстро расставить все элементы на странице по своим местам. На первый взгляд все максимально просто: свойство float: left позволяет прижать элемент к левому краю родителя, а соседние блоки будут «обтекать» его справа. Нетрудно догадаться, что указанное свойство float: right позволяет добиться обратного результата – элемент отправляется к правому верхнему краю родителя. Все бы ничего, но уж много нюансов скрыто от глаз новичка, что порой заставляет его хорошенько понервничать, пытаясь разобраться в магии флоатов. Первое, о чем нужно знать – свойство float вынимает элемент из потока документа. Изначально все элементы выстраиваются друг за другом в ряд сверху вниз. Стоит применить float к определенному элементу, как он буквально вырывается из ряда, соседний элемент тут же занимает его место. Если же у нас в блоке float элемент, то этот блок-родитель просто схлопнется – его высота теперь равна нулю. Естественно, при верстке страницы у нас будет не один такой float элемент. Конечно же, за время использования float-ов вариантов решения данных проблем накопилось много. Например, класс clearfix выручит нас и не даст родителю float-элементов схлопнуться. Давайте посмотрим на код.
Просто дописали дополнительный класс и все дела! Конечно, имея хорошую смекалку, можно решить практически любую задачку. Но стоит ли? Float – это долго, неэффективно и уже не так актуально в мире IT. Если захотите сделать адаптивную верстку, возникнет еще множество дополнительных трудностей, после которых точно захочется поближе познакомиться с flexbox. Если вы хотите верстать современные сайты – тогда используйте flexbox. Эта технология позволяет написав 3 строчки кода выровнять элементы по главной и поперечной оси, позволить блокам растягиваться, даже менять порядок их отображения! И это далеко не все. Если необходимо поставить блоки в ряд – пишем display: flex родительскому элементу. Дописав свойство строку justify-content, можем выровнять блоки по оси удобным для себя способом, в том числе прижать к правому или левому краю. Плюс к этому можем разместить блоки по центру либо расположить их на равномерном удалении друг от друга. Только одно это свойство на порядок превосходит то, что нам предлагает float. Кроме этого, эти же блоки с помощью значения flex-direction можно выстроить не только по горизонтальной оси, но и по вертикальной. Значение row-reverse позволяет поставить эти блоки в обратном порядке. Необходимо, чтобы блоки размещались не на одной строке? Тоже не проблема. Воспользуемся свойством flex-wrap. Это отлично подойдет как для отображения карточек товаров в интернет-магазине, так и для портфолио и во многих других случаях. Хорошо разобравшись со всеми возможностями flexbox, можно почувствовать себя буквально всемогущим. В примере, конечно, рассмотрены далеко не все возможности флексов, скорее наоборот – только самое начало.
Резюмируем плюсы flexbox:
- гибкость блоков, их способность растягиваться и сжиматься;
- упрощенное выравнивание элементов по вертикали и горизонтали;
- независимость от порядка расположения HTML-элементов;
- возможность простого адаптирования под направление текста right-to-left.
Для того, чтобы ближе познакомиться с flexbox и даже поэкспериментировать – предлагаем пройти бесплатный HTML&CSS Pre-COURSE.
