Верстка сайту на Flexbox CSS

Технологія flexbox дозволяє створювати більш легко та правильніше розкладку елементів для вебсторінки на відміну від float-ів, Flexbox дозволяють з легкістю вирівнювати елементи по горизонталі та по вертикалі, змінювати напрямок та порядок відображення елементів, розтягувати блоки на всю висоту чи ширину, або прибивати їх до будь-якого краю батьківського елемента.

Мета уроку - ознайомитися з основами технології flexbox, загальними поняттями та принципами логіки роботи технології flexbox, виробити розуміння того, як використовувати flexbox на практиці. Познайомитись із початковою простою структурою перед створенням лендіг (односторінкового) сайту та розібратися з тим, як виконувати перші кроки при верстці. Також розглянути створення простого меню на сайті з використанням флексбокс технології.

Мета уроку - ознайомитися з основними властивостями, що використовуються на практиці, і отримати розуміння того, коли їх використовувати. Розібрати які є можливості у властивостей align-items, flex-wrap, order, а також їх нюанси та переваги використання.

Мета уроку - розібрати як, навіщо і коли потрібно змінити напрямок основного потоку. Переглянути які аспекти з'являються при зміні потоку. Розглянути, якою стає поведінка у властивості margin з flexbox елементами, яким чином можна використовувати медіа запити при верстці макета, використовуючи flexbox технологію. Ознайомитися з властивістю flexdirection і як змінює свою поведінку властивість margin з використанням флексбоксів.

Мета уроку - познайомитися з властивостями flex-grow і flex-shrink для створення гумової верстки. Ознайомитись із процесом завершення планшетної та мобільної версії простої сторінки без використання додаткових правил медіа запитів.