Alinear múltiples bloques de imágenes en línea a izquierda y derecha

Question

Aug 15, 2017, 03:48 PM

Alinear múltiples bloques de imágenes en línea a izquierda y derecha

Estoy tratando de alinear múltiples imágenes en línea, cinco a la izquierda y una a la derecha (la firma), preferiblemente sin el uso de flotadores. Todas las imágenes deben estar alineadas verticalmente (desde la parte superior). Escuché que flex-box es una opción, pero tengo dificultades para implementarlo correctamente.

https://jsfiddle.net/z5h1tfnt/5/

<html>

<style>
/* Social Media Buttons */
.social_media_logos { 
    display: inline-block;
    margin: 0 5px; 

}

#signature{
    vertical-align: top;
}

</style>

<div class="social_media_logos">

    <!-- LinkedIn -->
    <a href="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/"><img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width= "50" height= "50" /></a>

    <!-- Instagram -->
    <a href="https://www.instagram.com/alhusseinimahdi/"><img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" /></a>

    <!-- GitHub -->
    <a href="https://github.com/csapidus"><img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" /></a>

    <!-- News Columns -->
    <a href="columns.html"><img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" /></a>

    <!-- Resume -->
    <img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" />

    <!-- Signature -->
    <img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" /> 

</div>

</html>