How to create a completely flexible piano keyboard with HTML and CSS

Question

I\'m trying to create a piano keyboard that will keep it\'s elements ratios using flex box, but can\'t seem to make the black notes stay the same width or height once I star

Answer 1

Demo @ Codepen

---

Flexbox is not required for this. A responsive keyboard layout can be accomplished with:
 

• additional class selectors that correspond with the note of each key:

 

• a margin for all black keys & each white key which precedes a black key, using an offset based on the black key's size:

.a, .b, .d, .e, .g, .black{
  margin: 0 0 0 (-($blackKey_Width / 2) - $blackKey_BorderWidth);
}

 

• the following key placement attributes:

.key{
  float:    left;
  position: relative;
}

 

• a higher z-index for the black keys:

.white{
  z-index: 1;
}
.black{
  z-index: 2;
}

 

• Viewport Units [vw, vh, vmin, vmax] for the (height & width) attributes of the (.white & .black) selectors. You can make this even more dynamic by sizing the black keys as a percentage of the white keys.