Макет страницы на Flexbox

Последнее обновление: 19.04.2017

Теперь рассмотрим создание стандартного макета страницы, который состоит их шапки, футера и центральной части, в которой есть три столбца: основное содержимое и два сайдбара.

Для этого определим следующую веб-страницу:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width" />
        <title>Flexbox в CSS3</title>
        <style>
			*{
				box-sizing: border-box;
			}
			html, body {
				padding: 0;
				margin: 0;
				font-family: verdana, arial, sans-serif;
			}

			body {
				color: #fff;
				font-size: 1.1em;
				padding: 1em;
				display: flex;
				flex-direction: column;
			}

			main {
				display: flex;
				flex-direction: column;
			}

			article {
				background-color: #546e7a;
				flex: 2 2 12em;
				padding: 1em;
			}

			nav, aside {
				flex: 1;
				background-color: #455a64;
			}

			nav {
				order: -1;
			}
			
			header, footer {
				flex: 0 0 5em;
				background-color: #37474f;
			}
			
			@media screen and (min-width: 600px) {
				
				body{
					min-height: 100vh;
				}
				main {
					flex-direction: row;
					min-height: 100%;
					flex: 1 1 auto;
				}
			}
        </style>
    </head>
    <body>
		<header>
            <p>Header</p>
        </header>
        <main>
            <article>
				<h1>Что такое Lorem Ipsum?</h1>
				<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной 
				"рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию 
				размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без 
				заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время</p>
			</article>
            <nav>
                <p>Navigation</p>
            </nav>
            <aside>
                <p>Sidebar</p>
            </aside>
        </main>
        <footer>
            <p>Footer</p>
        </footer>
	</body>
</html>
Макет верстки на flexbox в HTML5 и CSS3

Итак, flex-контейнером верхнего уровня здесь является элемент body. Его flex-элементами являются header, main и footer. Body располагает все свои элементы сверху вниз в столбик. Здесь также стоит отметить, что при ширине от 600px и выше для заполнения всего пространства браузера у body устанавливается стиль height: 100vh;.

Элементы header и footer аналогичны. Их свойство flex: 0 0 5em; указывают, что при любом изменении контейнера эти элементы будут иметь размер в 5em. То есть они имеют статический размер.

Более сложным является элемент main, который определяет основное содержимое. При этом будучи flex-элементом, он также является flex-контейнером для вложенных элементов и управляет их позиционированием. При ширине браузера до 600px он располагает элементы в столбик, что очень удобно на мобильных устройствах.

При ширине от 600px вложенные элементы nav, article и aside располагаются в виде строки. И поскольку при такой ширине браузера родительский элемент body заполняет по высоте все пространство браузера, то для заполнения всей высоты контейнера body при его изменении у элемента main устанавливается свойство flex: 1 1 auto;.

У вложенных в main flex-элементов стоит отметить, что элемент навигации nav и элемент сайдбара aside будут иметь одинаковые размеры при масштабировании контейнера. А элемент article, содержащий основное содержимое, будет соответственно больше. При этом хотя nav определен после элемента article, но благодаря установке свойства order: -1 блок навигации будет стоять до блока article.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850