HTML-код flex-макету, представленого на зображенні можна створити на основі стовпців за допомогою display: flex; і flex-direction: column;
See the Pen приклад flexbox by kravets (@raisa69) on CodePen.
У результаті весь flex-контейнер .wraper працює як гнучкий стовпець із блоками header, content, footer
Мінімальна висота флекс-контейнера .wraper : 100vh; правило використовує блок перегляду vh і гарантує, що блок .wraper охоплює всю висоту вікна перегляду.
Для притиснення підвалу до низу вікна браузера використані властивості flex і flex-shrink. Властивість flex є скороченою властивістю, яка може мати різну кількість значень.
Якщо flex має лише одне значення, то це означає означає flex-grow, яка визначає виділення додаткового місця на екрані (якщо воно є).
Отже, правило flex-grow: 1; означає, що основний вміст (.content) має отримати весь додатковий простір на екрані.
Щоб збалансувати цей ефект, також використовують властивість flex-shrink у нижньому блоці - підвалі зі значенням 0.
Ця властивість визначає, що відбувається, коли на екрані недостатньо місця. Якщо його значення дорівнює 0, це означає, що цей елемент не повинен зменшуватися, що б не сталося.
Таким чином, можна не боятися, що нижній блок - підвал якось зникне (або зменшиться) на екрані.
Завдання 1
See the Pen FOOTER NAV FLEXBOX пояснення верстки макету by kravets (@raisa69) on CodePen.