Создание макета HTML страниц сайта на основе Flex контейнеров
Разработчикам сайтов для создания макета сайта приходится делать множество тэгов разметки, добавлять в них различные отступы и другие параметры. С появлением Flex контейнеров эту задачу можно решить намного проще и быстрее. Поддержка Flex контейнеров сейчас осуществляется всеми современными браузерами.
Итак, нам необходимо создать стандартным макет страниц сайта с шапкой и футером, меню и сайдбаром и так, чтобы они автоматически меняли свой размер при смене разрешения, т.е. макет должен быть “резиновым”.
Также нужно сделать так, чтобы основной контейнер по высоте занимал всю область, а не сжимался до одной строки как в данном примере. Для этого будем использовать css спецификацию min-height.
CSS код будет выглядеть следующим образом:
<style>
body {
margin: 0;
font-size:24px;
}
.container {
display: flex;
min-height: 65%;
}
.main {
flex-grow: 1;
order: 2;
}
nav, .sidebar {
background-color: #a4c0f3;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 15%;
}
nav {
order: 1;
}
.sidebar {
order: 3;
}
header, footer, nav, .sidebar, .main {
text-align:center;
padding: 20px;
}
header {
background-color: #638fe0;
height: 15%;
}
footer {
background-color: #638fe0;
height: 10%;
}
</style>
HTML код намного короче:
<body>
<header>Шапка</header>
<div class="container">
<div class="main">Основной контейнер</div>
<nav>Меню</nav>
<div class="sidebar">Сайдбар</div>
</div>
<footer>Подвал</footer>
</body>
Итак мы создаем шапку в контейнере <head>, указываем для нее высоту 15% от основного окна и цвет. То же самое делаем для подвала, создав контейнер <footer>, для которого высоту указываем 10% и тот же цвет, что и для шапки.
Далее прописываем для основного класса container параметр display: flex, а также минимальную высоту 65%.
После этого мы указываем параметры flex для основного контейнера, меню с сайдбара. Для последних двух оставляем по 15%, указывая параметр “flex-basis: 15%”.
Так как эти контейнеры имеют другой порядок в html коде, то мы меняем положение меню и основного контейнера, прописывая для каждого тэга свой order, тем самым перемещая его назад. Например, если нам надо за несколько секунд поменять меню и сайдбар местами, то мы должны просто прописать:
nav {
order: 1;
}
.sidebar {
order: 3;
}
Для наглядности я увеличил размер и положение текста (font-size в body и text-align:center во всех остальных контейнерах).
Итак, мы получили простой макет HTML страниц для сайта.