Table des matières TP Layout mobile first

Voici 3 screens-shot de la même page suivant la largeur de l'écran 600px<, 600px< et 800px<, 800px>


Voici le source html + css incomplet. Compléter à l'aide de media-queries ce source afin d'obtenir le comportement visualisé ci-dessus.

On s'appuiera sur les 2 propriétés flex et order. Commencer à placer l'instruction flex:1; sur 1 ou plusieurs éléments puis ajuster. (Il s'agira de contrarier le flex: 1 100%; placé sur le .wrapper et qui fixe la longueur initial des items à 100% du .wrapper)

Rappel flex : La propriété flex spécifie la longueur de l'élément item, par rapport au reste des items flexibles à l'intérieur du même conteneur. La propriété flex est un raccourci pour les flex-grow, flex-shrink, et flex-basis