关于自定义键盘居中的问题

突然接到一个任务需要写一个26个英文字母键盘,一开始也是着急下手,但是发现了问题,就是居中的问题,虽然手动调也是可以,但是很明显兼容性并不好,想到兼容性,我也就条件反射的想到了弹性盒子,我觉得应该可以,那么接下来就是我的思路了,

首先键盘分为

 <div class="keyboard-base keyboard-first-wrap" style="display:none;">
        <div class="keybord-group">
            <span class="keybord-input-span">1</span>
            <span class="keybord-input-span">2</span>
            <span class="keybord-input-span">3</span>
            <span class="keybord-input-span">4</span>
            <span class="keybord-input-span">5</span>
            <span class="keybord-input-span">6</span>
            <span class="keybord-input-span">7</span>
            <span class="keybord-input-span">8</span>
            <span class="keybord-input-span">9</span>
            <span class="keybord-input-span">10</span>
        </div>
        <div class="keybord-group">
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
                <span class="keybord-input-span">2</span>
        </div>
        <div class="keybord-group keybord-group-special1">
                <span class="keybord-input-span">3</span>
                <span class="keybord-input-span">3</span>
                <span class="keybord-input-span">3</span>
                <span class="keybord-input-span">3</span>
                <span class="keybord-input-span">3</span>
                <span class="keybord-input-span">3</span>
                <span class="keybord-input-span">3</span>
                <span class="keybord-input-span">3</span>
               
        </div>
        <div class="keybord-group keybord-group-special2">
                <span class="keybord-input-span">4</span>
                <span class="keybord-input-span">4</span>
                <span class="keybord-input-span">4</span>
        </div>
    </div>

想要的效果是这种

我就稍加改动,只需要在keybord-group类里添加以下代码

.keybord-group{
    width : 100%;
    display: block;
    height : 36px;
    margin-top:10px;

    margin-left : auto;
    margin-right:auto;
//下面这三行是关键
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}