EXERCICE DAPPLICATION FLEXBOX

Contexte : vous tes investi dune mission : convertir de vieux designs web au
positionnement Flexbox. Vous naurez pas de rpit tant que vous naurez pas radiqu tous
les vieux hacks CSS de la Terre (ou presque). Et parce quil faut bien commencer quelque
part, vous allez convertir 2 premiers designs web.
Consigne :

Ce design est ancien (XHTML 1.0) : http://www.oswd.org/design/preview/id/3434/

Le contenu semble centr verticalement et horizontalement sur la page mais en
ralit il ne lest pas : il y a une marge verticale en dur . Adaptez tous les lments
de positionnement de ce design pour utiliser exclusivement du Flexbox, et profitez de
la puissance du Flexbox pour le centrage au milieu de la page !

Ce design trs classique est fait base de positionnement absolu :

http://www.wix.com/sample/website-viewer?lng=fr&site_id=1390814208157618
Eradiquez cette horreur et repartez sur un design Flexbox. Faites en sorte que les
photos droite stendent sur toute la hauteur de la colonne de gauche (quitte
laisser plus despace entre elles) sil y a plus de texte dans la colonne de gauche.

Technique :

Vous rcuprerez simplement les designs existants en enregistrant les pages web.

Vous transformerez tout ce qui est positionnement en positionnement Flexbox autant

que possible.

Il nest pas demand de toucher au reste des lments du design.

1/1

www.openclassrooms.com