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

Du 27 au 28 octobre 2021 → Journées d’études Écritures japonaises : concevoir des caractères typographiques – Inalco (Paris)

La BULAC (Bibliothèque universitaire des langues et civilisations) et l’Inalco (Institut national des langues et civilisations orientales) organisent deux journées d’études Écritures japonaises : concevoir des caractères typographiques. Pour Émilie Rigaud, chercheuse et créatrice de caractères, « en proposant un dialogue entre historiens et designers, ces deux journées d’études se…

Du 26 octobre au 24 décembre 2021 → Exposition Écritures japonaises : concevoir des caractères typographiques – Bulac (Paris)

L’exposition Écritures japonaises : concevoir des caractères typographiques organisée par l’Inalco et la Bulac explore le système d’écriture japonais. Cette langue intègre en effet quatre scripts distinctifs : les kanji, hiragana, katakana et le latin. Les kanji viennent de Chine, tandis que les katakana sont mobilisés pour des mots, noms…

Feed

Festival international de mode et de photographie d’Hyères : les lauréat·es de la 36e édition

Fondé en 1985, le Festival international de mode et de photographie vise à récompenser des créateurs et créatrices. Mode, accessoires, photographie, plusieurs catégories sont ouvertes. Cette année, pour sa 36e édition, l’événement s’est tenu du 14 au 17 octobre à Hyères. Les lauréat·es ont été dévoilé·es. Ifeanyi Okwuadi, lauréat du concours mode Le Britannique…

Ressources

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…

Comment réaliser un texte en 3D sur SketchUp Pro ?

Après un premier épisode dédié à Sketch, tuto.com et étapes: vous offre un nouveau tutoriel. Celui-ci porte sur la fonction création de texte en 3D du logiciel SketchUp Pro. SketchUp Pro est un logiciel de CAO (Conception Assistée par Ordinateur), destiné à créer, visualiser et modifier assez aisément ses idées…

Prenez en main Sketch en 1 heure grâce à tuto.com

Dans le cadre de son partenariat avec le site tuto.com, étapes: vous offre plusieurs tutoriels normalement diffusés de façon payante. Aujourd’hui, ils portent sur l’application Sketch, outil permettant la création d’interfaces utilisateurs et le travail sur l’expérience utilisateur (UX). Ce tutoriel s’adresse à tous ceux intéressés par le design d’interfaces,…