Web 2017-04-20 : Différence entre versions

Version actuelle en date du 6 mai 2019 à 20:57

Aujourd'hui nous allons voir comment mettre en page, c'est à dire disposer les contenus dans l'espace de la page web.

Positionnement CSS

• modèle de boite
• géométrie
• taille de boite
• bloc vs en ligne

Voir la page dédiée.

Mise en page traditionnelle

• floats

Mise en page Moderne avec Flex-box

• flexbox

Résumé

• Utiliser display: flex; pour créer un conteneur flex.
• Utiliser justify-content pour définir l'alignement horizontal des éléments.
• Utiliser align-items pour définir l'alignement vertical des éléments.
• Utiliser flex-direction si vous avez besoin de lignes plutôt que de colonnes.
• Utiliser les valeurs row-reverse ou column-reverse pour inverser l'ordre des éléments.
• Utiliser order pour personnaliser individuellement l'ordre des éléments.
• Utiliser align-self pour aligner verticalement les éléments.
• Utiliser flex créer des boites flexibles qui peuvent s'étendre ou se contracter.

Exercice

En partant du résultat de l'exercice précédent, créer la une d'un journal de votre invention, qui présente de manière hiérarchisée des contenus existant ou de votre invention. Le contenu peut-être général ou spécialisé; sérieux ou léger; vrai ou parodique (dans ce cas, merci de rester dans les limites de la décence).