body
{
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
.container
{
width: 90%;
display: flex;
flex-direction: column;
gap: 10px;
}
.red
{
background-color: red;
color: white;
text-align: center;
padding: 10px;
}
.row
{
display: flex;
flex-direction: row;
gap: 10px;
}
.column
{
display: flex;
flex-direction: column;
gap: 5px;
}
.column_blue
{
display: flex;
flex-direction: column;
gap: 5px;
flex-basis: 30%;
}
.column_yellow
{
display: flex;
flex-direction: column;
gap: 5px;
flex-basis: 30%;
}
.column_black
{
display: flex;
flex-direction: column;
gap: 5px;
flex-basis: 30%;
}
.green1
{
background-color: green;
color: white;
text-align: center;
padding: 10px;
flex-basis: 40%;
}
.green2
{
background-color: green;
color: white;
text-align: center;
padding: 10px;
flex-basis: 58%;
}
.blue
{
background-color: blue;
color: white;
text-align: center;
padding: 5px;
}
.purple
{
background-color: purple;
color: white;
text-align: center;
padding: 10px;
flex-basis: 30%;
}
.yellow
{
background-color: yellow;
color: black;
text-align: center;
padding: 5px;
flex-basis: 100%;
}
.black1 {
background-color: black;
color: white;
text-align: center;
padding: 10px;
flex-basis: 70%;
}
.black2 {
background-color: black;
color: white;
text-align: center;
padding: 10px;
flex-basis: 28%;
}
.row
{
display: flex;
gap: 10px;
}
.pink1
{
background-color: pink;
text-align: center;
padding: 10px;
flex-basis: 70%;
}
.pink2
{
background-color: pink;
text-align: center;
padding: 10px;
flex-basis: 28%;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="red">Red</div>
<div class="row">
<div class="green1">Green</div>
<div class="green2">Green</div>
</div>
<div class="row">
<div class="column_blue">
<div class="blue">Blue</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
</div>
<div class="purple">Purple</div>
<div class="column_yellow">
<div class="yellow">Yellow</div>
<div class="yellow">Yellow</div>
</div>
<div class="column_black">
<div class="black1">Black</div>
<div class="black2">Black</div>
</div>
</div>
<div class="row">
<div class="pink1">Pink</div>
<div class="pink2">Pink</div>
</div>
</div>
</body>
</html>