css flex弹性布局 一行三列布局

2021年9月13日 138次阅读 来源: Teln_小凯

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

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

效果图

《css 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;"></span></div>
                    <div>压裂监控</div>
                </div>
                <div class="item">
                    <div><span class="iconfont" style="color: #EC1129;"></span></div>
                    <div>压裂监控</div>
                </div>
                <div class="item">
                    <div><span class="iconfont" style="color: #EC1129;"></span></div>
                    <div>压裂监控</div>
                </div>
            </div>

    原文作者：Teln_小凯
    原文地址: https://blog.csdn.net/qq873113580/article/details/122011854
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞