Platzieren Sie divs nebeneinander in der Fußzeile. Wie?

Question

Ich habe ein Problem mit der Platzierung meiner divs auf der gleichen Linie in meinem Footer-Element. Was passiert, ist, dass ein div so die anderen Stellen darunter drückt. Hier ist mein HTML-Code:

<footer> 
     <div class="footercontact"> 
     email@email.com<br /> 
     phone number<br /> 
     Street name Number<br /> 
     Postnumber 
     </div> 

     <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> 
     <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>   

    <div id="clockdiv"> 
     <div class="dayItem clockItem"></div> 
     <div class="hourItem clockItem"></div> 
    </div> 
</footer> 

CSS-Code:

footer { 
    font-size: 0.75em; 
    text-align: center; 
    clear: both; 
    padding-top: 50px; 
} 

.footercontact { 
    text-align:left; 
    width: 25%; 
} 

#clockdiv 
{ 
    float: right; 
} 

Also im Grunde möchte ich mein erstes div, meine Ankerelemente und die zweite div alle miteinander in der Fußzeile der nächste sein. Wie kann ich das erreichen? Vielen Dank!

Answer 1

footer { 
 
    display: flex; 
 
} 
 

 
footer > div { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 2em; 
 
    color: white; 
 
}

<footer> 
 
    <div style="background-color: red">Address</div> 
 
    <div style="background-color: green">Links</div> 
 
    <div style="background-color: blue">Clock</div> 
 
</footer>