父标签设置为display:flex时，flex布局时设置单个子标签靠右

[CSS] 纯文本查看 复制代码

                body {                 
                margin-right:3px; 
                margin-left:5px; 
                margin-top:15px; 
                word-wrap:break-word;                                                                                                
                }                                       
                .bottominfo{
                margin-top:10px;
                padding:20px 20px;
                }
                .SubjectContent{
                padding:20px;
                border-bottom:2px solid #f8f9fb; 
                }
                .SubjectContent .title {
                padding:14px;
                text-align:left;
                font-size:56px;
                line-height:64px;
                }
                .SubjectContent .info{
                font-size:30px;
                color:#888;
                padding:0 14px;
                height:28px;
                line-height:22px;
                display:inline-block;
                }                
                .content{'.SubjectContent 
                margin:0 16px 20px;
                text-align:left;
                font-size:46px;
                line-height:180%;
                overflow-x:hidden;
                }        
                .time {
                font-size:36px;
                height:10px;'        
                padding-left:10px;                
                color:#8b8b8b;
                }
                .username{
                color: #576b95;
                font-size: 40px;
                top: 0px;
                padding-left:20px;
                width:auto;
                margin-top:-8px;
                }                                              
                .topname{
                padding: 25px 5px;
                display: flex;/*父标签设置为display:flex;*/
                flex-direction: row;                
                }
                .sharebutton{
                float:right;
                top:8px;
                height: 40px;
                width: 40px;
                border:1px solid #fff!important;
                line-height:0px;
                font-size: 0px;
                margin: 0;
                box-sizing:content-box;
                width:10%;
                background-color:#FFFFFFFF;        
                
                margin-left: auto;        /*父标签设置为display:flex时，子标签必须设置为margin-left: auto;子标签才会靠右对齐*/                                                        
                margin-top:-2px;        

                }
                .shareimg{
                height: 40px;
                width: 40px;                                                                        
                }        

[HTML] 纯文本查看 复制代码

        <div class="SubjectContent">
                <div class="title">Android Studio：Low disk space on a Android Studio system directory partition</div>

                <div class="topname">
                        <div class="time">2020.06.18</div>
                        <div class="username">
                        admin 
                        </div>
                        <!-- <div style="float:right;text-align: right;"> -->
                        <button open-type="share" class="sharebutton" plain="true"><image src="share.png" class="shareimg" ></image></button>
                        <!-- </div> -->
                </div>

                <div class="content">
                测试测试测试测试测试测试测试测试测试测试
                </div>
                <div class="bottominfo">
                        <div class="info">
                           阅读 100 / 回复 100
                        </div>
                </div>
        </div>