Мова в даній статті піде про властивості flex. Про нього я вже писав в даній статті - Друга частина секретних властивостей CSS3.
Розмітка сторінки
HTML частина
Визначимо дві колонки, які в подальшому будемо робити однакової висоти за допомогою CSS:
- flex-grow - на скільки один окремий блок може бути більше сусідніх елементів.
- flex-shrink - визначає можливість стискатися при необхідності.
Наша сторінка близька до завершення. Але коли блок з основним контентом звужується, то сторінка стає дуже довгою. Тому при певній ширині екрану ми можемо зробити так, щоб сайдбар йшов під блок з основним контентом і зручно проглядався на мобільних пристроях:
Тут наведено код без префіксів для того, щоб він не займав багато місця і не виглядав громіздко. Ви можете повністю робочий приклад за допомогою кнопки на початку статті.
Також потрібно сказати про те, де працює даний метод. Так як це властивість досить нове, то і працює воно в сучасних браузерах Firefox, Chrome, Safari, Opera і IE 11.
З даної статті ви дізналися як зробити колонки однакової висоти на CSS. Але це далеко не всі можливості цього CSS властивості. Властивість flex дозволяє робити блоки гумовими, вибудовувати елементи автоматично в декілька стовпців або рядків, займаючи всю вільну область, а також багато іншого.
Але найголовніше, і, головне, часто використовується рішення при верстці сторінок, ми розглянули в даній статті.
😎 Приголомшливе рішення двох колонок однакової висоти! Альтернативи немає!
Інші рішення - або «обманки», на кшталт border шириною в aside. Більш-менш непогане рішення - надання глобального контейнеру властивості таблиці (display: table;), а aside і main - властивостей комірки (display: table-cell;). Але і це рішення - не те, що не дуже ... А тут - просто захоплення!
Рішення просте, витончене, легко підлаштовується під себе. Мало того, включає і варіант для мобілок.
Хоча не зовсім зрозуміло найостанніше правило:
@media all and (max-width: 700px).
#main
>
- тут не видно цього зазору в 40px.
Спасибо большое, беру на озброєння.
А ось цікаво, наскільки буде правильно прикрутити заголовок і підвал поза контейнера page? Наприклад, зробити глобальний контейнер
#global margin: 0 auto;
max-width: 1300px;>
а в нього хедер, потім section id = "page # 038; # 34, нарешті, підвал ...
Дякую, добра людина - згодилося!
Але у нього є пара проблемочек - вирішити їх можна, але доведеться попихтіти.
ІМХО, для позбавлення від цієї перемотування, є 2 рішення:
а) У меню посилатися не просто на статті, а посилання на якір на початку статті. наприклад,
І тоді при натисканні кнопки меню юзер перескочить відразу в початок статті, а не сторінки. А меню залишиться зверху.
2. Друга проблема - виявилося, не так просто підібрати ширину, при якій aside і page шикуються стрічкою:
Хоча, зараз поекспериментував: виявляється, в різних мобільних браузерах все це по-різному! yoклмн!
Може, хто запропонує рішення?