<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Завдання 1</title>
</head>
<body>
<div class="container">
<div class="box-parent">
<div class="box"></div>
</div>
<div class="box-parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="box-parent">
<div class="box"></div>
</div>
<div class="box-parent">
<div class="box"></div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
.container{
display: flex;
flex-wrap: wrap;
juctify-content: center;
flex-direction: column;
}
.box {
padding: 10px;
border: 3px solid black;
width: 50px;
height: 50px;
margin: 100px;
border-radius: 10px;
display: flex;
}
.box-parent{
display: flex;
width: 100%;
justify-content: center;
}
Первое что в голову пришло, но лучше ещё подредактировать.
Простой
