HTML
<div class="flag">
<div class="top">
<div class="box">
<div class="star-row even">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="star-row odd">
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
</div>
<div class="star-row even">
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
</div>
<div class="star-row odd">
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
</div>
<div class="star-row even">
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
</div>
<div class="star-row odd">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="star-row even">
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
</div>
<div class="star-row odd">
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
</div>
<div class="star-row even">
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
</div>
</div>
<div class="stripes">
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
</div>
</div>
<div class="bottom">
<div class="stripes">
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
<div class="stripe"> </div>
</div>
</div>
</div>
SCSS
$red: #c53939;
$white: white;
$blue: #325f92;
.flag {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
display: flex;
flex: 7;
}
.bottom {
display: flex;
flex: 6;
}
.box {
flex: 0;
flex-basis: 700px;
background: $blue;
display: flex;
flex-direction: column;
padding: 20px;
}
.star-row {
flex: 1;
// outline: 1px solid white;
display: flex;
justify-content: space-between;
&.odd {
padding: 0 9.5%;
}
}
.star {
// outline: 1px solid red;
height: 1/9*50vh;
flex: 0;
flex-basis: 50px;
margin: 0 0%;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/211696/star.svg") no-repeat center;
}
.star-svg {
fill: #fff;
width: 100%;
height: 10px;
}
.stripes {
flex: 1;
display: flex;
flex-direction: column;
}
.stripe {
background: $red;
flex: 1;
&:nth-child(even) {
background: $white;
}
}
.bottom .stripe:nth-child(odd) {
background: $white;
}
.bottom .stripe:nth-child(even) {
background: $red;
}
