Flexbox Flag

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; }
JAVASCRIPT
Expand for more options Login