css样式：*{margin:0;padding:0;}ul,li{list-style:none;}.flex-cont{display:-webkit-flex;display:-webkit-box;display:flex;align-items:center;/*负责纵轴对齐*/}.flex-item{flex:1;background-color:red;/*手机宽度有限，为最重要元素，设置子元素的宽高，其余都属于带flex的元素：1set*/}.s-tit{/*高度等于行高，文字垂直居中*//*line-height:36px;height:36px;color:green;*/font-size:20px;font-weight:bold;}.s-tit,.s-desc{line-height:1.2;/*字体大小的1.2倍*/}.s-img{/*占*/width:50px;height:50px;background:#31BBEE;margin-right:5px;}.f-icon{display:块；宽度：20px；高度：20px；背景颜色：#31BBEE;}实现效果，看到效果，想到什么？老铁们，是不是觉得很眼熟？这不就是我们在里面看到的QQ、微信、聊天界面吗，实现起来是不是超级简单。join不用display:flex实现，你觉得呢。反正我会想到float属性，但是后果呢？真让人头疼。如果你用float，你就得擦他的屁股。那么，使用display:flex不是很酷吗？详细解释：使用display:flex属性时，假设左边放图片，中间放文字，右边放其他东西，将这三者放在一个盒子里，为包含三个元素的父元素设置显示：flex，设置左右两边的宽度，主元素设置flex:1（我这里以文字为主元素），这样三个元素就可以轻松一行显示。是不是很不错！小白，有不妥之处请指正，拍拍手。如果对你有一点帮助，点个赞好吗？