<html>
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<div class="content">
<div class="blok"><p>Блок информации №1</p></div>
<div class="blok"><p>Блок информации №2</p></div>
<div class="blok"><p>Блок информации №3</p></div>
<article><p>Здесь основной контент.</p></article>
</div>
</body>
</html> .content {
display: flex;
flex-flow: row wrap; /* флекс элементы заполняют собой строку (row) */
width: 75%;
height: 450px;
margin: auto;
background-color: #333;
}
.blok {
order: 1;
flex: 1 1 30%;
background-color: #ccc;
margin: 5px;
}
article {
order: 2;
flex: 1 1 auto;
background-color: #bbb;
border: 5px solid #333;
padding: 7px;
}
p {
color: #fff;
padding: 15px;
font-size: 22px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.