突然接到一个任务需要写一个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;
}