flex弹性布局可以很好的解决浮动布局里面不能垂直居中，和经常由屏幕大小导致的自动换行问题

下面是一个一行三列的布局+水平居中

效果图

 

 

 

 

 

 HTML代码

核心说明：只要以下3个样式，实现一行3列

display: flex; 让div成为弹性布局

justify-content: space-between; div里面的标签，全部安左中右排列

align-items: center;div里面的表情，垂直居中

<div class="submenu" style="display: flex;justify-content: space-between;align-items: center;padding-top: 15px;padding-bottom: 15px;">
                <div class="item">
                    <div><span class="iconfont" style="color: #EC1129;">&#xe7e9;</span></div>
                    <div>压裂监控</div>
                </div>
                <div class="item">
                    <div><span class="iconfont" style="color: #EC1129;">&#xe7e9;</span></div>
                    <div>压裂监控</div>
                </div>
                <div class="item">
                    <div><span class="iconfont" style="color: #EC1129;">&#xe7e9;</span></div>
                    <div>压裂监控</div>
                </div>
            </div>