Galerie en CSS3 avec Flex

Flex est une propriété de CSS3 permettant d’ajuster automatiquement l’alignement des éléments (en général de largeur identique) en fonction de la largeur de l’écran, tout en conservant 100% de couverture. J’ai repris cette propriété pour faire un affichage de galerie automatisé en fonction des images chargées.

CSS :

(on peut moduler la hauteur)

.images {display: flex; flex-flow: row wrap;}
.images img {min-height:200px; width:auto;}

PHP :

<?php
$t = scandir('./img/');
$t = array_slice($t, 2);
foreach ($t as $file):
    $size = getimagesize('./img/' . $file);
    echo '<img src="img/' . $file . '" style="flex:' . $size[0]/$size[1] . ';"/> ';
endforeach;
?>

Résultat :

https://youtu.be/AT0X9Gro-90