Простой макет сайта с использованием Flexbox

Сегодня мы с Вами создадим простой макет сайта с использованием Flexbox (Flexible Box Layout Module). Наш макет будет содержать шапку, контент и подвал. Подвал будет прижат к низу страницы, а контент занимать всю свободную область.

Html код нашего макета следующий:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>Test</title>
		<link rel="stylesheet" href="style.css">
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>

</html>
<body>
	<div class="wrapper">
		<header class="header">
			<p>Шапка</p>
		</header>
		<div class="main-container">
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
		</div>
		<footer class="footer">
			<p>Подвал</p>
		</footer>
	</div>
</body>

Стили style.css без Flexbox:

*{
	padding: 0;
	margin: 0;
} 

html{
	height: 100%;
	width: 100%;
}

body{
	margin: 0 auto;
	padding: 0;
	background-color: lightblue; /*раскрасим для наглядности*/
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 14px;
	height: 100%;
	width: 100%;
}

.wrapper {
	margin: 0 auto;
	max-width: 1120px;
	min-height: 100%;
}

.header {
	background-color: teal; /*раскрасим для наглядности*/
	padding: 10px;
	text-align: center;
}

.main-container {
	background-color: #ffffff; /*раскрасим для наглядности*/
	padding: 10px;
}

.footer {
	background-color: thistle; /*раскрасим для наглядности*/
	padding: 10px;
	text-align: center;
}

p{
	padding-bottom: 10px;
}

Теперь добавляем flex:

.wrapper {
	display: flex; /*блоку добавляем flex*/
	flex-direction: column; /*меняем оси местами*/
}

.main-container {
	flex-basis: auto; /*определяем базовое значение основного размера элемента flex контейнера*/
	flex-grow: 1; /*позволяем flex элементу увеличиваться*/
	flex-shrink: 1; /*позволяем flex элементу сжиматься*/
/*или можно записать более компактно так:
	flex: 1 1 auto; */
}

Вот и всё.

При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.