CSS3 Flexbox, plongez dans les CSS modernes

Livrecss

Publié par le , mis à jour le (34947 lectures)

css livre css3 flexbox

Raphaël Goetter (134 pages, éditions Eyrolles, EAN13 : 9782212143638)

« Flexible Box Layout Module », mieux connue sous le nom de « Flexbox », est une spécification CSS3 du W3C qui définit un nouveau modèle de boîte et de positionnement jusqu’alors inédit.

À lui seul, ce mode de positionnement rend élémentaires tous les problèmes classiques rencontrés avec CSS depuis des décennies :

  • les alignements rendus simplissimes ;
  • le centrage vertical ;
  • une fluidité naturelle des éléments ;
  • des hauteurs identiques entre frères ;
  • la modification de l’ordre d’affichage ;
  • et ce n’est qu’un début !

Flexbox est déjà en train de révolutionner de manière profonde et pérenne notre façon de concevoir des designs et des composants en CSS.

Cet ouvrage, sorti le 18 février 2016, vous permettra de découvrir et de tirer parti de toutes les nouveautés apportées par cette spécification CSS3, notamment à travers : 134 pages en couleurs, 6 travaux pratiques décortiqués, et plus de 110 illustrations et codes consultables en ligne.

Le livre est publié chez Eyrolles au tarif de 19€90 au format papier, et à 13€90 en eBook. Il est disponible dans de nombreuses autres boutiques physiques ou en ligne: Amazon, FNAC, Leclerc, Lavoisier, Decitre, etc.

La relecture technique a été réalisée minutieusement par Myriam Dupont et Geoffrey Crofte que je remercie chaleureusement.

Note sur l'objectivité de cet article : étant moi-même l'auteur de cet ouvrage,  je vais bien évidemment avoir beaucoup de difficultés à en dire du mal. Je vais toutefois tâcher de le traiter avec toute la neutralité possible et apporter le maximum d'information le concernant.

Au sommaire :

  • Une brève histoire de Flexbox
  • Les bases du design avec Flexbox
  • TP : réordonner des éléments
  • Trois astuces utiles
  • TP : une 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

À qui s’adresse ce livre ?

Aux webdesigners et intégrateurs avancés ou experts qui souhaitent appréhender et maîtriser en production ce nouveau modèle de positionnement excitant.

Aux développeurs et chefs de projet web soucieux de découvrir les rouages d’une technologie qui facilitera assurément la vie de leurs projets.

À quiconque est impatient de laisser tomber toutes les bidouilles ancestrales de CSS et d’ouvrir ses horizons à des modèles bien plus intuitifs.

Ce que vous trouverez dans ce livre

J'ai découvert Flexbox en 2012 et je lui ai très rapidement consacré un tutoriel sur Alsacréations. Depuis ce temps, je voue un amour inconditionnel à ce module de positionnement si pratique.

Cela fait donc bien longtemps que j'ai à coeur d'en parler, de propager la bonne parole, soit durant mes formations soit pendant les conférences auxquelles j'ai la chance de participer.

Ce livre est un condensé de toutes mes années de veilles technologiques, de bidouilles en production ou sur des sites personnels. Il est donc parsemé de bonnes pratiques de base, mais aussi de bien nombreuses astuces professionnelles, de cas concrets décortiqués et de travaux pratiques et bien sûr, tout ça saupoudré de Responsive Webdesign.

J'ai vraiment souhaité que cet ouvrage soit avant tout très concret et assez peu théorique.

Ce que vous ne trouverez pas dans ce livre

Tout ce qui sort du domaine de Flexbox.

Vous n'apprendrez pas les bases de CSS, ni les autres méthodes de positionnement telles que float, position, inline-block, etc. Il est fortement nécessaire de disposer d'un bon bagage dans l'intégration HTML et CSS pour mieux apprécier ce livre.

Ceci dit, j'en ai profité pour distiller plein de petites astuces à la "pro-tip" et vous y apprendrez certainement d'autres nouveautés telles que object-fit, grid layout, la variable currentColor, calc(), :nth-child().

Le site du livre

Vous trouverez un site dédié à l’ouvrage, sa présentation, les liens vers les boutiques et éventuelles coquilles à l’adresse goetter.fr/livres/flexbox/

Je vous souhaite une bonne lecture et reste disponible pour répondre à vos questions en commentaires ci-dessous. 

Par ailleurs, si vous avez déjà lu et apprécié le livre (ou pas d'ailleurs), n'hésitez pas à laisser un commentaire constructif et une note sur les diverses boutiques en ligne : Eyrolles, Amazon, FNAC, etc. Ça ne vous coûte rien et c'est très appréciable et utile pour moi.

livre Flexbox

Note moyenne : 5/5 (7 votes)

Attribuer une note :

Commentaires

Commandé à l'instant chez amazon, malgré le prix un peu élevé pour un livre de 130 pages à mon gout, mais je fais confiance à la qualité présumée du contenu.... :-)

J'ai commencé la lecture du livre mais je bute un peu à la page 19 sur une imprécision concernant la propriété raccourcie 'flex' qui n'est pas expliquée en détail.

on nous donne deux exemples:
- flex:1;
- flex:0;

et après on nous dit que la valeur par défaut c'est flex:0 1 auto;

alors flex:1; ça veut-il dire flex:1 1 auto; ?

si on veut mettre le 2ème paramètre à 0 et garder le 1er paramètre par défaut, c'est à dire obtenir (0 0 auto) , faut il mettre flex:0 0; ?

en fait on comprend pas ce qu'il se passe lorsque l'on met un seul paramètre dans cette propriété flex qui en compte trois.

-------------------

ensuite, page 30, dans le premier exemple de code, ne manque t-il pas flex-direction: column; pour que le centrage vertical soit réalisé?

@lionel_css3 : Bonsoir Lionel.

C'est un choix de ma part de ne pas entrer dans les détails de la propriété "flex" au début du livre parce que... elle nécessite de comprendre plein d'autres choses avant de vraiment l'appréhender.
C'est pour ça qu'il y a un chapitre plus tard, le chapitre 10, justement nommé "la propriété Flex en détail".

Pour ce qui est de la page 30, non il n'est pas nécessaire d'indiquer une direction. "margin: auto" fonctionne quelle que soit la direction dans un flex-container (c'est écrit juste en dessous du code d'ailleurs).

Le livre suit un ordre chronologique dans la compréhension, j'ai préféré ne pas compliquer inutilement dès le départ. Crois-moi il vaut mieux ! Tout s'articule et s'explique au fur et à mesure.
Bonne lecture !

ah d'accord, je comprends mieux et c'est pour cela que j'avais précisé au début que "j'avais commencé la lecture..." et donc pas encore fini le livre.. et je ne savais pas que tu en reparlais après.

Mais déjà avant de commencer le livre, je m'étais déjà penché sur le Flexbox et je trouvais cette propriété flex un peu piégeuse dans le sens ou elle est utilisable sans qu'on y fasse figurer tous les paramètres...
Donc je vais attendre de voir la suite :-)

Je ne regrette pas l'achat de ce petit bouquin très clair et abondamment pourvu d'exemples qui parlent d'eux-mêmes. Il me semble que je devrais faire des progrès à sa lecture.
Un regret : qu'il n'y ait pas plus sur les éléments imbriqués. J'essaie en ce moment de faire en flex l'équivalent d'un tableau à trois colonnes, la deuxième contenant les enfants de la première (au sens généalogique du terme) et la troisième ceux de la seconde. Et je bute encore sur pas mal de détails, entre autre l'obtention de largeurs égales sur les trois.
Peut-être un petit tutoriel sur le site ?
En tout cas bravo à Raphaël !

@oldmerou : Bonjour,

Je n'ai pas vraiment compris ce que tu voulais faire ("la deuxième (colonne) contenant les enfants de la première (colonne)" hu ?), mais quoi qu'il en soit - et comme précisé à plusieurs reprises - Flexbox n'est pas vraiment prévu pour des constructions complexes, 2d, où Grid Layout est (sera) véritablement le meilleur choix.

@Raphael : Bonjour,
Tout simple, le projet : à gauche les couples oncle-tante ( colonne 1), en face de chacun leurs enfants (cousins) avec leur conjoint(e) ( colonne 2), et en face de chacun des couples de cousins les enfants de ceux-ci (les petits-cousins, colonne 3). Mon problème n'est pas tant de créer les cases correspondantes que de gérer les tailles et les alignements, d'autant que passer de Firefox à Chrome ou à IE donne parfois des résultats surprenants.
C'est bien plus simple, évidemment, de faire un tableau avec quelques rowspan, sur le plan visuel, mais alors le contenu des cases n'a aucun rapport avec son emplacement dans la table.
Je ne désespère pas d'arriver à trouver où je patauge. Et je vais commencer à regarder du côté du Grid Layout, au moins pour l'avenir.
Merci en tout cas pur ta réponse.

@Raphaël
Bonjour
J'avais raison de penser que ton bouquin me ferait progresser : en le potassant un peu plus attentivement, je me suis rendu compte que je n'avais vraiment pas bien assimilé les propriétés, en particulier flex. Et là, ça y est j'ai mes trois colonnes égales en largeur et tout le monde à sa place.
Donc un grand merci encore. Et j'espère que si le grid layout devient bien supporté tu nous l'expliquera avec le même talent !