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

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wrapper">
		<header class="header">
			<p>Шапка</p>
		</header>
		<div class="main-container">
			<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti non aliquid eos cupiditate reprehenderit est exercitationem dolorum repudiandae sapiente ea veniam ipsum dolores consequuntur consequatur quia excepturi, voluptatibus libero quo.</p>
		</div>
		<footer class="footer">
			<p>Подвал</p>
		</footer>
	</div>
</body>
</html>

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

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body{
	margin: 0 auto;
	padding: 0;
	background-color: rgb(232, 237, 238);
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;
	height: 100%;
	width: 100%;
}

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

.header{
	background-color: #000;
	padding: 20px;
	text-align: center;
	color: #fff;
}

.main-container{
	background-color: #fff;
	padding: 20px;

}

.footer{
	background-color: #000;
	padding: 20px;
	text-align: center;
	color: #fff;
}

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; */
}

Вот и всё.

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