先看下微信当中的自带的数字键盘

这种实现方式比较简单，可以直接用inline-block标签，设置每行平均宽度，比如一行要放4个按钮，可以那么宽度就可以设为25%，同时要注意设置css样式为box-sizing: border-box,这样在设置边框 的时候就不会超出定义的固定宽度。

接下来看下另一种复杂点的键盘：

初看貌似可以像在上面方案一样，只是键盘文字再套一层标签，然后给外部标签增加padding。但是由于手机宽度不是固定的，所以无法计算出通用padding使得按钮元素在每一行精确平分空间显示。

这时候flex布局的justify-content：space-between属性就派上用场了。

从上图可以看到，该属性可以使一行当中的左右两边的元素靠边，中间元素会自动分配等距间隔。

所以用于存放键盘数字的数组就可以写成这样：

const textArr = [['A', 'B', 'C', 'D', 'E','F'],['G', 'H', 'I', 'J', 'K',],['L', 'M', 'N', 'O', 'P', 'Q']...]

这时候会遇到最后一行不是填满一整行的情况，那么可以将剩下的元素设置为空，['挂'，'','','','',''],同时在循环的时候判断元素是否为空，为空的话加上css样式：opacity: 0（不能设置为display: none);

 

最后：

1  为提高性能，注意采用事件委托方式绑定点击事件；

2  按钮点击的时候要有相应反馈，可以设置元素的为active的时候改变背景色。水墨散开效果是现在安卓上比较流行的点击反馈的效果，下面这段代码是实现该效果的，使用的时候给按钮添加ripple类名就可以了：

1 .ripple { 2     position: relative; 3     //隐藏溢出的径向渐变背景 4     // overflow: hidden; 5 } 6  7 .ripple:after { 8     content: ""; 9     display: block;10     position: absolute;11     width: 100%;12     height: 100%;13     top: 0;14     left: 0;15     pointer-events: none;16     //设置径向渐变17     background-image: radial-gradient(circle, #666 10%, transparent 10.01%);18     background-repeat: no-repeat;19     background-position: 50%;20     transform: scale(10, 10);21     opacity: 0;22     transition: transform .3s, opacity .3s;23 }24 25 .ripple:active:after {26     transform: scale(0, 0);27     opacity: .3;28     //设置初始状态29     transition: 0s;30 }