Comment utiliser la fonction flexbox en CSS ?

Étapes: continue sa collaboration avec tuto.com en vous offrant un troisième tutoriel. Après un premier épisode dédié à Sketch, un second sur la fonction création de texte en 3D du logiciel SketchUp Pro, apprenez aujourd’hui à développer correctement une interface numérique grâce au module de création de boîtes flexibles CSS, aussi appelé flexbox.

La plupart des designers graphiques s’étant essayés au développement d’interfaces en responsive ont probablement du s’y casser la tête. Dès lors qu’il s’agit de créer des colonnes et des lignes de tailles égales, réparties équitablement sur l’écran, c’est un peu la croix et la bannière… Mais heureusement, il existe une technique CSS bien connue des développeurs front-end. Exit les calculs en pourcentages et autres unités de mesure qui prennent plusieurs dizaines de lignes et bienvenue flexbox ! Grâce à lui, vous gagnerez un temps considérable, pour un travail propre qui convient à n’importe quel type d’écran.

Le tutoriel disponible ci-dessous permet donc d’utiliser convenablement flexbox. Il est extrait d’un cours délivrant 8 astuces CSS au sujet de la typographie, du positionnement d’éléments ou encore de l’animation.


Jeu-concours

Le jeu-concours est terminé !

Étapes: et tuto.com vous font gagner des abonnements de 6 mois !

Comment participer ?

→ Likez les pages Instagram de tuto.com et d’étapes:.
→ Avant le 26 septembre à 23h59, envoyez un mail à ?? avec votre nom, votre prénom et la réponse à la question suivante :
quelle déclaration CSS permet d’intimer aux parents des éléments de devenir un conteneur flexible ?
Indice : la réponse se trouve dans la vidéo, entre 6:30 et 7:30.

Les gagnants seront ensuite tirés au sort parmi ceux ayant donné la bonne réponse.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Agenda

Le 12 janvier à 10h → Conférence The great history of data representation – Université Paris Panthéon Sorbonne (Paris)

Le 12 janvier à 10h, Paul Kahn, professeur émérite de l’Université Northeastern à Boston, en histoire du design d’information, donne une série de trois conférences intitulée « The great history of data representation ». Trois séquences sont prévues : « Genealogy and Lineage », « Timelines » et « Scientific Explanation ». Ces séances sont ouvertes à tous…

Les 14 janvier, 18 février, 18 mars, 15 avril et 13 mai 2022 → Matrimoine de la BD – Maison des sciences de l’homme (Saint-Denis-la-Plaine)

Organisé par le collectif Les Bréchoises, dédié à la recherche sur les créatrices de bande dessinée, le séminaire « Matrimoine de la BD » vise à mettre en lumière le rôle des femmes dans l’histoire de la bande dessinée française. Sont notamment abordés l’histoire du médium, ses enjeux socio-politiques ainsi…

À partir du 12 janvier 2022 → La Chine des porcelaines du 9e au 18e siècle – Musée national des arts asiatiques – Guimet, exposition 3D en ligne

Le musée national des arts asiatiques – Guimet inaugure sa première exposition 3D « La Chine des porcelaines du 9e au 18e siècle », sous le commissariat de la conservatrice Claire Déléry. Cette expérience immersive dévoile 36 œuvres numérisées de porcelaines de Chine issues de la collection du musée. 1800 m2 ont…

Jusqu’au 24 avril 2022 → Thierry Mugler ‣ Couturissime – Musée des Arts décoratifs (Paris)

Jusqu’au 24 avril 2022, le musée des Arts décoratifs accueille l’exposition « Thierry Mugler, Couturissime », conçue et produite en itinérance avec le Musée des beaux-arts de Montréal (MBAM). Sont dévoilés par cette rétrospective photographies, vidéos, prêt-à-porter et accessoires de l’artiste, photographe, inventeur de parfum et metteur en scène. Le parcours d’exposition…

Feed

*Duuu radio donne la parole aux artistes et designer·euses

Fondée en 2012, *Duuu est une webradio dédiée à la création contemporaine. Artiste-associée au T2G-Théâtre de Gennevilliers, elle est installée à la Folie N4 du parc de la Villette, où se trouve le studio d’enregistrement. *Duuu cherche à faire entendre des situations de réflexion et de travail dans le monde…

La Dongba New Year Gift Box célèbre l’année du Tigre

Pour fêter l’année du Tigre, débutant le 1er février dans le calendrier chinois, le Daily Studio, structure interne à Tencent, a développé une box festive inspirée de l’écriture Dongba. Cette écriture, usitée par le peuple Naxi dans le Yunnan et les régions tibétaines en Chine, est la seule totalement pictographique…

Candidatez aux D&AD Awards 2022 !

Designer·euses indépendant·es, agences et studios… vous avez jusqu’au 23 mars pour candidater aux D&AD Awards 2022. Ce concours, fondé en 1962 à Londres, récompense des travaux dans les champs du design et de la publicité. Les « Pencils » décernés sont répartis selon 4 grades progressifs : bois, graphite, jaune et noir,…

ReSisters, le roman graphique écoféministe pour un autre monde

Publié aux éditions Tana, filiale d’Editis, « ReSisters » est un roman graphique écoféministe créé par la philosophe Jeanne Burgart Goutal, ainsi que par l’illustratrice Aurore Chapon. En 2030, dans un futur teinté de dystopisme et marqué par un capitalisme autoritaire, la raréfaction des ressources et la pandémie, sept personnages tentent de…

Ressources

Comment animer une typographie sur After Effect ?

Suite à un premier épisode dédié aux bases du motion design sur After Effect, tuto.com et étapes: vous offre un second tutoriel. Celui-ci permet de comprendre les principes de base de l’animation d’un mot ou d’une phrase. Le tutoriel « Exemple animation : animation d’une typo » de tuto.com donne la possibilité…

Initiez-vous au motion design avec tuto.com !

Dans le cadre du partenariat noué entre tuto.com, plateforme de tutoriels permettant de se former à de nombreux logiciels, et étapes:, bénéficiez d’un accès gratuit à un tutoriel d’initiation au motion design sur After Effect ! After Effect est un logiciel de la suite Adobe de composition et d’effets visuels.…

Comment utiliser la fonction flexbox en CSS ?

Étapes: continue sa collaboration avec tuto.com en vous offrant un troisième tutoriel. Après un premier épisode dédié à Sketch, un second sur la fonction création de texte en 3D du logiciel SketchUp Pro, apprenez aujourd’hui à développer correctement une interface numérique grâce au module de création de boîtes flexibles CSS, aussi appelé flexbox. La plupart des…