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 e-mail ne sera pas publiée.

Agenda

Le 21 mai 2022 → Puces Typo 2022 – Campus Fonderie de l’Image (Bagnolet)

Les Puces Typo, salon dans le domaine de la typographie, se tiendront le 21 mai 2022. Rassemblant designers, typographes ou encore éditeurs indépendants, l’événement est l’occasion de découvrir, au Campus Fonderie de l’Image, des innovations typographiques, affiches à acquérir, performances ou encore animations… étapes: sera présent aux Puces Typo 2022 qui se déroulent au Campus Fonderie…

Feed

Tout art contre la guerre !

En réaction à la guerre en Ukraine, le curateur, critique en design et professeur à l’École supérieure des Beaux-Arts de Bordeaux Pierre Ponant édite une publication intitulée “Tout art contre la guerre”. Celle-ci rassemble, suite à un appel à contribution, des créations d’une cinquantaine d’artistes, dessinateur·trices, photographes, architectes, graphistes, poètes,…

Ressources

Flexible Visual Systems, nouveau manuel de conception d’identités visuelles

Dans le cadre du prochain numéro d’étapes: à paraître en mars prochain et disponible en pré-commande ici jusqu’au 10 mars, nous publions un extrait de notre rubrique « Livres ». Flexible Visual Systems The Design Manual for Contemporary Visual Identities  Conçu par Martin Lorenz, co-fondateur du studio de design graphique TwoPoints.Net, l’ouvrage Flexible Visual Systems est un…

Les bases de l’UX Design sur Adobe XD

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 à l’UX Design sur Adobe XD ! Lancé en 2017, Adobe XD est un logiciel d’UI/UX design dédié à la conception de sites web et d’applications. Il…