so here I am trying to get some reviews from my code, where I have to replicate the norwegian flag using flexbox.
First to be sayed is that my teachers told me to divide the flag in two sections, where I have had to insert two of the four squares in eachone, but I ignored this since with declarations like align-content: space-between;
I could send the four squares right to the corners and play with margins to adjust them, that’s why I just created 4 containers (white squares) with its respective item (red squares).
Before I show my code, I want to tell that it was so diffuicult to me to deal with the size of the elements, first a try to use flex-basis: ;
and flex-grow: ;
to automatically give size to the squares, but this does’nt work for me, so I have to use width: ;
and height: ;
.
Due to all this I want to get reccomendations to improve my code or best alternatives to reach the objective and then a kind of explanation about the size of elements.
Here’s the code:
body{
background-color: #00205B;
margin: 0;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.white-square1, .white-square2, .white-square3, .white-square4{
background-color: #ffffff;
display: flex;
align-content: flex-start;
justify-content: space-between;
align-items: flex-start;
}
.white-square1, .white-square3{
margin: 0 50px 50px 0;
height: 43.8vh;
width: 25vw;
flex-grow: 1;
}
.white-square2, .white-square4{
margin: 0 0 50px 50px;
height: 43.8vh;
width: 50vw;
flex-grow: 2;
}
.white-square3{
margin: 50px 50px 0 0;
align-items: flex-end;
}
.white-square4{
margin: 50px 0 0 50px;
align-items: flex-end;
}
.red-square1, .red-square2, .red-square3, .red-square4{
background-color: #BA0C2F;
}
.red-square1, .red-square3{
margin: 0 50px 50px 0;
height: 37.8vh;
width: 25vw;
flex-grow: 1;
margin-left: 0;
}
.red-square2, .red-square4{
margin: 0 0 50px 50px;
height: 37.8vh;
width: 50vw;
flex-grow: 2;
margin-right: 0;
}
.red-square3{
margin: 50px 50px 0 0;
align-items: flex-end;
}
.red-square4{
margin: 50px 0 0 50px;
align-items: flex-end;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://codereview.stackexchange.com/style.css">
<title>Flexbox Actividad 3</title>
</head>
<body>
<section class="white-square1">
<div class="red-square1"></div>
</section>
<section class="white-square2">
<div class="red-square2"></div>
</section>
<section class="white-square3">
<div class="red-square3"></div>
</section>
<section class="white-square4">
<div class="red-square4"></div>
</section>
</body>
</html>