Делаю сайты разных мастей уже лет 5-6. Когда я узнал о flexbox, я был в шоке... Все так просто? Нет больше танцев с бубном, тысячи ̶ч̶е̶р̶т̶е̶й̶ костылей и float от которого уже тошнит! Но я бы не сказал что вход легкий, особенно если начинаешь новый проект и решаешь окончательно перейти на flex. Скорость разработки падает и из-за нехватки опыта приходится переделывать огромные куски верстки потому что "сразу не дошло как лучше". Тогда уже был в стадии "почти готово" css grid, его я сразу отмел. Почему? Просто понравился больше flexbox, а css grid показался более сложным для быстрого входа и каким-то несуразным.
Насчет танцев с бубном я погорячился... Пришлось немного "потанцевать" когда я понял что далеко не все браузеры хорошо с ним работают, особенно старые версии. Что ж делать... Я уже по сути сверстал первый многостраничный лендинг/сайт и тут такое... Поискав в Яндексе префиксы нашел все что нужно. Далее начал думать. Как же теперь быть.
Вообще от flex-a мне нужно только позиционирование, по центру, слева, раскидать по площади и прочее. Нарисовав схемки на листе я понял какие основные штучки нужны и начал писать мини фреймворк. Ну "фреймворк" это громко сказано, но определению он таковым все же является.
В общем нам нужно:
- определить объект как flex-овый;
.flex {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
- чтобы становились в цепочку;
.flex_row {
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
}
- чтобы становились в колонку;
.flex_col {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
}
- чтобы переносились на новую строку если места не хватает;
.flex_wrap {
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
- чтобы не переносились;
.flex_nowrap {
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
}
- объект в центре по горизонту;
.flex_center {
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
}
- объект в центре по вертикали;
.flex_center_center {
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
- раскидать объекты по горизонту с одинаковым расстоянием между ними (как иконки преимуществ на большинстве лендингов);
.flex_between {
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}
- чтобы элементы прижимались влево или вправо
/*Справа*/
.flex_end {
-webkit-box-pack:end;
-ms-flex-pack:end;
justify-content:flex-end;
}
/*Слева*/
.flex_start {
-webkit-box-pack:start;
-ms-flex-pack:start;
justify-content:flex-start;
}
В новой версии я уже много чего добавил, но на старте этого более чем достаточно. Как применять? Кто хоть немного знает верстку уже понял(-а) как использовать. Приведу пару примеров.
Между head подключаем css файл с нашим импровизированным фреймворком:
<link rel="stylesheet" type="text/css" href="/css/myflex.css">
Пишем например что-то такое:
<div class = "flex flex_center">
<div style = "height:100px; width:100px; background:#000;">
</div>
</div>
Получится квадрат в центре:
Чтобы позиционировать в центре экрана или блока в обеих плоскостях, нужно чтобы у блока была высота. Она определяется по соседним элементам или указывается напрямую. Например сделаем наш div на весь экран и разместим черный квадрат в центре:
<div class = "flex flex_center flex_center_center" style = "height:100vh;">
<div style = "height:100px; width:100px; background:#000;">
</div>
</div>
Также можно добавить второй квадрат и поставить их в цепочку добавив класс "flex_row".
class = "flex flex_row flex_center flex_center_center"
Или в колонку. Просто приписываем "flex_col" вместо "flex_row" и не забываем про пробелы между названиями классов.
class = "flex flex_col flex_center flex_center_center"
Это конечно далеко не все возможности flexbox, но это основа для быстрого старта, остальное приходит в процессе. Вообще, в flexbox есть много лишнего, многие вещи я так и не нашел где применить, видимо не попадался тот самый проект в котором, например, мне нужно было бы реверсивно (в обратном порядке) показывать блоки и многие другие.
С того момента как я начал использовать flexbox я в раз 5 увеличил скорость верстки, с ним просто работать, спасибо тем кто его создал!
P.S.: Не пинайте сильно) Моя первая статья, долго решался что-то написать и вот решил начать делиться опытом)))
И ловите ссылочку на файл css из этого "урока" https://yadi.sk/d/UUhMrgp2S76rdQ
В этой папке буду выкладывать все файлы из будущих статей, думаю писать еще и много!