Image Image Image Image Image
© Copyright 2013 Pascal Antoinet

facebook-s  twitter-s  linkedin-s

Scroll to Top

To Top

Apprendre & Se former

25

Avr
2017

In Apprendre & Se former
Évolutions du Web

par  PA

CSS Flexbox par Raphael Goetter

On 25, Avr 2017 | In Apprendre & Se former, Évolutions du Web | par  PA

Flexbox (Flexible Box Layout Module) est en passe de modifier considérablement nos habitudes de construction CSS. Avec un syntaxe particulièrement économe, Flexbox apporte des solutions instantanées à des problèmes d’alignement de blocs en particulier sur l’axe vertical, de distribution de marges, de gestion du responsive qui jusqu’à présent pouvaient donner lieu à de véritables casse-tête pour les webdesigners et intégrateurs.
La transition est en marche et Flexbox sera pleinement déployé dans la version 4 de Boostrap. A noter cependant que la structuration totale d’une page web avec flex n’est pas envisageable et peut générer de nombreux bug d’affichage (voir à ce propos l’excellent article de Jake Archibald). On se contera donc d’utiliser ces propriétés pour la gestion des éléments internes à la page.

Les demandes de rétro-compatibilité avec les versions 8 et 9 d’Internet Explorer disparaissent progressivement des briefs clients. Internet Explorer 10 et 11 implémentent le support Flexbox de façon partielle et l’abandon du support des versions IE < 11 par Microsoft est sensé encourager la modernisation du parc (plus d’info ici).

Pour appréhender au mieux les richesses et les subtilités de Flexbox, il est hautement recommandé de se procurer l’ouvrage de Raphael Goetter : CSS 3 Flexbox, plongez dans les CSS modernes, aux Éditions Eyrolles. 130 pages écrites avec, comme toujours, concision et humour, pour découvrir l’ensemble des propriétés disponibles, mettre en pratique et rester à jour !

css3 flexbox goetter webdesign

 

Sommaire
  • Une brève histoire de Flexbox
  • Les bases du design avec Flexbox
  • TP : réordonner des éléments
  • Astuces utiles
  • TP : un navigation responsive
  • TP : un gabarit simple
  • TP : une galerie d’images
  • Les principes fondamentaux
  • TP : un formulaire fluide
  • La propriété flex en détail
  • Modèles de design
  • TP : construction de grilles
  • Encore plus loin avec Flexbox
  • Performances et compatibilité
  • Flexbox contre Grid Layout ?
  • Ressources utiles

Tags | , ,