Притиснення footer на flexbox

 

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

У представленому макеті доповнити стилізацію  меню у футері, щоб пункти меню були у вигляді блоків  одного розміру, розміщених в ряд на великих екранах і вишиковувались у колонку, займаючи всю доступну ширину на екранах розміром  менше 580px

See the Pen FOOTER NAV FLEXBOX пояснення верстки макету by kravets (@raisa69) on CodePen.