Верстка: Float'ы или Flex'ы?

#html #css #вёрстка #flexbox

Я новичок во фронтенде, изучаю вопрос создания сайта с нуля. 
Последнее время буквально мучает вопрос, что считают бывалые в этом деле насчет верстки
сайта целиком на флексах (flex)? Вроде как и резина реализуется, и адаптив одновременно.
Или же первые попытки лучше делать по старинке ДИВами и их размещать флоатами? Какая
техника предпочтительнее?

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

Ответы

Ответ 1

Однозначно стоит изучать flexbox в первую очередь.

Единственные доводы в сторону float:


старые браузеры (IE9-).
поддержка и понимание работы существующего кода (на данный момент  существует действительно
очень много кода, использующего float).




Принципиальные различия

Они принципиально отличаются. float присваивается элементами, а display: flex или
display: inline-flex; присваивается контейнерам и оказывают влияние на расположение
элементов контейнера. Когда блоку присвоен display: flex или display: inline-flex;,
его элементы игнорируют свойства float, clear и vertical-align.

Предостережение

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


многострочная разметки (когда элементы могут разрастаться на несколько строк). Достигается
через установку контейнеру flex-wrap: wrap; или flex-wrap: wrap-reverse;. Через float
элементы разве что могут располагаться по левому краю (через float: left;) либо просто
по правому краю (через float: right) с необходимостью инвертировать порядок расположения
элементов. Отдельная большая тем для flexbox из-за его огромных возможностей.
расположение элементов в стоблец (когда элементы располагаются не в строчку). Достигается
через установку контейнеру flex-direction: column; или flex-direction: column-reverse;.
Отдельная большая тема для flexbox из-за его огромных возможностей.
возможности flex-элементов растягиваться и сужаться с помощью свойств flex-grow и
flex-shrink. Советую детально изучить эту непростую тему.
как flex-элементы работают с margin: auto; (margin занимает оставшееся пространство
в соответствующем направлении).
сочетание flexbox и абсолютного позиционирования.
взаимодействие flexbox-элементов c отрицательными margin и z-index (можно регулировать
кто-то на кого "залазит" без абсолютного позиционирования).

Установим положительный z-index для первого элемента, что он "залазил" на второй
(если уберём — то будет наоборот):



.flex {
  display: flex;
}

.flex-item {
  /* Просто для демонстрации */
  color: white;
  font-size: 2rem;
  padding: 20px;
}

.flex-item:nth-child(1) {
  background-color: cornflowerblue;
  /* Зададим чтобы первый "налазил" на второй */
  z-index: 1;
}

.flex-item:nth-child(2) {
  background-color: lime;
  margin-left: -20px;
}

  

    One
  
  

    Two
  




flexbox и таблицы. Можно tr установить display: flex; и получить адаптивность для
строк таблицы. Например мы можем инвертировать расположение элементов в строках таблицы:



tr {
  display: flex;
  flex-direction: row-reverse;
}

td {
  border: 1px solid gray;
}

  

    
1-1
    
1-2
  
  

    
2-1
    
2-2
  






Чем float плох? Чем flexbox хорош?

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


Чтобы контейнер имел ненулевую высоту ему приходится всегда добавлять класс clearfix:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}





Для flexbox-контейнера такие "фокусы" не нужны.


Нельзя горизонтально центрировать элементы с помощью float. Нет значения float: center;.
Приходится применять другие приёмы.

Для flexbox-контейнера достаточно присвоить justify-content: center;.



.container {
  display: flex;
  justify-content: center;
}

.item {
  /* Просто для демонстрации */
  background-color: orange;
  color: white;
  font-size: 2rem;
  padding: 10px;
  border-radius: 10px;
}

  

    One
  
  

    Two
  
  

    Three
  
  

    Four
  
  

    Five
  




Чтобы расположить элементы по правую сторону, нужно их инвертировать в разметке (расположить
в обратном порядке), присвоив им float: right;.

Для flexbox-контейнера достаточно присвоить justify-content: flex-end; и нет необходимости
располагать разметку в обратном порядке.

Демонстрация:



.container {
  display: flex;
  justify-content: flex-end;
}

.item {
  /* Просто для демонстрации */
  background-color: orange;
  color: white;
  font-size: 2rem;
  padding: 10px;
  border-radius: 10px;
}

  

    One
  
  

    Two
  
  

    Three
  
  

    Four
  
  

    Five
  




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

С помощью flexbox можно либо инвертировать расположение элементов с помощью присвоения
контейнеру flex-direction: row-reverse;:  



.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  /* Просто для демонстрации */
  background-color: orange;
  color: white;
  font-size: 2rem;
  padding: 10px;
  border-radius: 10px;
}

  

    One
  
  

    Two
  
  

    Three
  
  

    Four
  
  

    Five
  





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



.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  /* Просто для демонстрации */
  background-color: orange;
  color: white;
  font-size: 2rem;
  padding: 10px;
  border-radius: 10px;
}

.item:nth-of-type(1) { order: 3; }
.item:nth-of-type(2) { order: 4; }
.item:nth-of-type(3) { order: 1; }
.item:nth-of-type(4) { order: 5; }
.item:nth-of-type(5) { order: 2; }

  

    One
  
  

    Two
  
  

    Three
  
  

    Four
  
  

    Five
  




С помощью float невозможно без хаков гарантировать нахождение элементов на одной строке.

В flexbox такое поведение заложено по умолчанию (flex-wrap: nowrap; установлено по
умолчанию) и элементы не буду переноситься на новую строку без явного указания контейнеру
flex-wrap: wrap; (или в редком случае flex-wrap: wrap-reverse;).
Нет никакого контроля за вертикальным расположением элементов. Всё выравнивается
"по верху" без возможности на это повлиять. Также нельзя установить элементам одинаковую
высоту без установления фиксированной высоты всем элементам.

В flexbox есть возможность установить вертикальное расположение как и всем элементу,
так и индивидуально элементу. Всем — устанавливаем контейнеру align-items, индивидуально
— устанавливаем элементу align-item.

Значения:


stretch (по умолчанию) — элементы занимают всю высоту контейнера.
flex-start — выравнивание элементов по верху.
center — выравнивание элементов по центру.
flex-end — выравнивание элементов по низу.
baseline — выравнивание элементов по линии шрифта.





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


Ответ 2

Единственный "недостаток" флексов - это их отсутствие в IE9 и ниже. Но так как Вы
только начинаете изучать верстку, а их доля неуклонно снижается (на данный момент -
менее 2,5% на IE8 и IE9 вместе взятые), то через некоторое время проблема отсутствия
флексов в браузере перейдет из области проблем разработчика в область проблем пользователя.

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

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