Завершився наш перший мітап з літньої серії Fun-n-Code. Як і обіцяли – перший день був реально веселий. Здебільшого, завдяки нашим гостям та їх щиро веселій реакції на формат подачі матеріалу. В рамках серії ми відійшли від звичних презентацій на проекторі та трохи повернулись в кам’яний вік. А саме малюнків на дошці.

Ми звикли до розділення сторінки сайту на логічні блоки: header, sidebar, main content та footer. Така структура дозволяє швидко віднайти потрібні елементи на сторінці та переходити по сторінках. З початку зародження web використовувались різні підходи для досягнення подібної структури. Саме історію розвитку цих підходів ми й розглянули на мітапі.

Спочатку були таблиці. На зміну їм прийшли div з CSS властивістю float. Далі фіксовані сітки, по типу Grid 960. А за ними вже звична для всіх адаптивна сітка Bootstrap. Довгий час він був головним інструментом розподілення елементів на сторінці, аж до появи підтримки Flexbox в CSS. На можливостях Flexbox ми зупинились більш детально. Також гості з досвідом використання Flexbox ділились своїми останніми здобутками.

У другий день мітапу ми занурились у практичне використання переваг Flexbox. Почали ми з пізнавальної гри на вивчення CSS властивостей з набору Flexbox, а потім створили декілька компонентів з його допомогою.

Сітка Bootstrap 4-ї версії вже використовує Flexbox замість float. Розуміння його можливостей кардинально змінить вашу продуктивність та адаптивність ваших сторінок. Кам’яний вік CSS без вертикального вирівнювання та розподілу вільного місця між елементами вже минув ;). Використовуйте сучасні підходи. Познайомтесь з Flexbox ;)!