floatプロパティを使用せずに応答可能なdivを並べる方法

Question

<div class="logo-social-box">/*Main Container*/ 
    <div class="logo">/*First Div*/ 

    </div> 
    <div class="social-box">/*Second Div*/ 

    </div> 
</div> 

「ロゴ」と「ソーシャルボックス」を並べて設定します。しかし、私は彼らの反応が欲しい。 float` `使用と間違って何

Answer 1

使用display: flex

.logo-social-box { 
 
    display: flex; 
 
} 
 

 
.logo-social-box .logo { 
 
    background: #aaa; 
 
    padding: 5px; 
 
} 
 
.logo-social-box .social-box { 
 
    flex: 1; 
 
    padding: 5px; 
 
    background: #ddd; 
 
}

<div class="logo-social-box"> 
 
    <div class="logo">/*First Div*/ 
 

 
    </div> 
 
    <div class="social-box">/*Second Div*/ 
 

 
    </div> 
 
</div>