flex布局中同一行内对齐左右两端

Posted 2020-12-01 yite

之前实现左右对齐都是用的float，但是用float经常会出现浮动影响，有时候清浮动也不能完全消除影响，后来用了flex之后觉得挺好用，不存在这个问题，所以现在都是能用flex就用flex，以下是用flex替代float实现左右对齐的代码

<div class="lh" style="padding: 20px 0;">
    <div style="display: flex;flex-flow: row nowrap;justify-content: space-between;background-color: white;padding: 10px;">
        <span>2017中国服务机器人大赛‘</span>
        <span>2019-11-01</span>
    </div>
</div>

 

最终效果如下（专注实现功能，所以页面比较简陋。。。）