Formation Flexbox et Grid Layout

Les mises en page Responsive n'auront plus aucun secret pour vous après avoir découvert ces deux spécifications CSS3 révolutionnaires pour construire des composants, des grilles, voire des applications web entières en quelques lignes de code.

Une formations entièrement dédiée au positionnement moderne et responsive en CSS !
Flexbox et Grid Layout sont deux modes de positionnement CSS parfaitement complémentaires et désormais exploitables en production sur l’ensemble des navigateurs. Le concept général de Grid Layout est de structurer l’espace en zones majeures, au sein d’une page web ou d’une application, tandis que Flexbox a pour rôle de designer les composants qui s'y trouvent.

Vous apprendrez au cours de cette formation :

  • à (re)découvrir le positionnement CSS propre et maintenable, dépourvu de bidouilles et code inutile,
  • à maîtriser le Responsive grâce à la capacité de Flexbox et Grid Layout à s'adapter immédiatement aux différentes tailles d'écran,
  • à gérer de multiples templates (gabarits) de page ou d'application simplement et sans intervenir sur la structure du document,
  • à… réapprendre à aimer CSS !

Concepts généraux de Flexbox

  • Distribution
  • Alignements
  • Ordonnancement
  • Flexibilité
  • Compatibilité navigateurs

La distribution

  • display: flex et display: inline-flex
  • L'orientation avec flex-direction
  • Le passage à la ligne avec flex-wrap
  • Exemples

L'ordonnancement

  • La propriété order
  • Particularités

L'alignement

  • Comprendre les axes dans Flexbox
  • L'alignement dans l'axe principal
  • L'alignement dans l'axe secondaire
  • L'alignement sur plusieurs pistes
  • L'alignement d'éléments individuels
  • Le pouvoir de la propriété margin

La flexibilité

  • Comprendre la flexibilité
  • Pouvoir s'agrandir avec flex-grow
  • Pouvoir se réduire avec flex-shrink
  • La taille idéale avec flex-basis
  • Cumuls et calculs savants

Les pièges de Flexbox

  • Les propriétés prioritaires
  • Les bugs des navigateurs
  • Les comportements inattendus
  • Et à la fin tout finit bien !

Concepts généraux

  • Démonstration initiale
  • Une spécification W3C finalisée
  • Grid Container, Grid Item
  • Grid Line, Grid Track, Grid Cell, Grid Area
  • Les propriétés de grille sur le parent
  • Les propriétés de grille sur les enfants

Le Flux dans la grille

  • Grille implicite
  • Grille explicite
  • Propriétés de flux automatique
  • Placement automatique

Unités et valeurs de Grid Layout

  • L'unité "fr"
  • La valeur "auto"
  • La fonction "minmax()"

Placer explicitement

  • Le Placement défini
  • Propriétés de placement défini
  • Les Zones nommées
  • Propriétés de zones nommées
  • Les propriétés raccourcies
  • Les méthodes de fusion de cellules
  • Appliquer des gouttières

Aligner dans Grid Layout

  • Alignement des l'ensemble des cellules
  • Alignement général des Grid Items
  • Alignement individuel d'un Grid Item

Répétition de motifs

  • Fonction repeat()
  • Les valeurs auto-fill et auto-fit
  • La combinaison repeat() + auto-fit + minmax()

Fonctionnalités avancées

  • Modification de l'ordre d'affichage
  • Superposition d'éléments
  • Valeurs négatives de Grid Line
  • Construction d'un template responsive

Pour conclure

  • Support de Grid Layout
  • Ressources
  • Choisir entre Flexbox et Grid Layout

Public

Cette formation à CSS3 Flexbox et Grid Layout est destinée aux webdesigners et intégrateurs avancés ou experts qui souhaitent maîtriser en production ces modèles de positionnement responsive, ainsi qu'aux développeurs et chefs de projet Web qui s’interrogent sur les possibilités offertes par CSS en termes de design d’interfaces.

Objectifs

À la fin de la formation, vous êtes capable de concevoir des pages et applications web avec Flexbox et Grid Layout.

Prérequis

Être familier avec HTML, CSS et bien connaître les notions de base de positionnement CSS (float, position absolute, inline-block, Flexbox)

Moyens pédagogiques

Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 8 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.

Suivi et appréciation des résultats

L'exécution physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur. Sanction : attestation de fin de stage.

Besoin d'un financement ?

Une formation est un investissement, pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées.

Voir les différents financements

Avant cette formation, préparez-vous avec :

À la suite de cette formation, nous vous recommandons :

Envie de connaître la date
de nos prochaines formations ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France

En soumettant ce formulaire vous acceptez que les informations saisies soient utilisées pour permettre de vous recontacter. Votre e-mail ne sera pas mémorisé pour un autre usage. En savoir plus