Maîtrisez facilement le CSS FlexBox

Catégories : css, flexbox, html

À propos du cours

Salut les amis et bienvenue à cette nouvelle formation sur le CSS FlexBox 😉

C’est quoi le CSS FlexBox?

Le CSS FlexBox, aussi appelé « module des boîtes flexibles » est un des standards CSS3 permettant de disposer facilement les éléments dans une page web afin de les adapter aux différents types de supports. La force du CSS Flexbox réside dans sa technique de mise en page selon les axes (Axe principal et Axe secondaire) permettant d’aligner les éléments se trouvant dans un container ou de distribuer l’espace entres eux.
En outre, Flexbox permet beaucoup d’autres choses qu’on verra tout au long de cette formation.

Bonne formation.

Afficher plus

Apprendre à travailler avec le CSS FlexBox
Profiter de la puissance du CSS 3
Coder facilement des sites Responsive
Maîtriser la mise en page selon les axes (Axe principal & secondaire)
Maîtriser les propriétés flexbox du container et des items
Coder un menu résponsive
A la fin de cette formation, on codera ensemble, étape par étape, quelques templates en CSS FlexBox afin de mettre en pratique nos connaissances acquises dans cette formation.

Contenu du cours

Introduction et ressources
Introduction à la formation CSS FlexBox

1 – Introduction – CSS Flexbox

02:20
2 – Display Flex

09:16

Propriétés du Flex Container
Dans cette section, nous allons aborder successivement les propriétés relatives au flex Container

Propriétés du Flex Items
Dans cette section, nous allons étudier successivement les propriétés relatives aux flex Items

Coder un template Responsive en CSS FlexBox
Dans cette dernière section, nous allons coder, étape par étape, un template responsive avec le CSS FlexBox. Cela nous aidera à mettre en pratique nos connaissances acquises tout au long de cette formation ;-)

Remerciements

Notes et avis de l’apprenant

5.0

Total 1 Note

1 évaluation

0 évaluation

salimdu15@outlook.fr

Il y a 11 mois

merci pour cette petite formation j'aurais aime que tu fasse une formation sur styled-components sur react

Cookie	Durée	Description
cookielawinfo-checkbox-analytics	11 mois	Ce cookie est utilisé pour stocker le consentement de l'utilisateur pour les cookies dans la catégorie « Analytique ».
cookielawinfo-checkbox-functional	11 mois	Ce cookie est défini pour enregistrer le consentement de l'utilisateur pour les cookies dans la catégorie « Fonctionnels ».
cookielawinfo-checkbox-necessary	11 mois	Ces cookies sont utilisés pour stocker le consentement de l'utilisateur pour les cookies dans la catégorie "Nécessaires".
cookielawinfo-checkbox-others	11 mois	Ce cookie est utilisé pour stocker le consentement de l'utilisateur pour les cookies dans la catégorie "Autres".
cookielawinfo-checkbox-performance	11 mois	Ce cookie est utilisé pour stocker le consentement de l'utilisateur pour les cookies dans la catégorie « Performance ».
viewed_cookie_policy	11 mois	Ce cookie est utilisé pour stocker si l'utilisateur a consenti ou non à l'utilisation de cookies. Il ne stocke aucune donnée personnelle.

Maîtrisez facilement le CSS FlexBox

À propos du cours

Qu’allez-vous apprendre ?

Contenu du cours

Introduction et ressources
Introduction à la formation CSS FlexBox

1 – Introduction – CSS Flexbox

2 – Display Flex

Propriétés du Flex Container
Dans cette section, nous allons aborder successivement les propriétés relatives au flex Container

3 – Flex-Direction

4 – Flex-Wrap

5 – Flex-Flow

6 – Justify-Content

7 – Align-Items

8 – Align-Content

Propriétés du Flex Items
Dans cette section, nous allons étudier successivement les propriétés relatives aux flex Items

9 – Order

10 – Flex-Grow

11 – Flex-Shrink

12 – Flex-Basis

13 – Flex

14 – Align-Self

Coder un template Responsive en CSS FlexBox
Dans cette dernière section, nous allons coder, étape par étape, un template responsive avec le CSS FlexBox. Cela nous aidera à mettre en pratique nos connaissances acquises tout au long de cette formation ;-)

15 – Exercices pratiques – Partie 1

16 – Exercices pratiques – Partie 2

17 – Exercices pratiques – Partie 3

18 – Exercices pratiques – Partie 4

19 – Exercices pratiques – Partie 5

20 – Exercices pratiques – Partie 6

21 – Exercices pratiques – Partie 7

22 – Exercices pratiques – Partie 8

Remerciements

Bravo !

Suivez-nous

À propos du cours

Qu’allez-vous apprendre ?

Contenu du cours

Introduction et ressources Introduction à la formation CSS FlexBox

1 – Introduction – CSS Flexbox

2 – Display Flex

Propriétés du Flex Container Dans cette section, nous allons aborder successivement les propriétés relatives au flex Container

3 – Flex-Direction

4 – Flex-Wrap

5 – Flex-Flow

6 – Justify-Content

7 – Align-Items

8 – Align-Content

Propriétés du Flex Items Dans cette section, nous allons étudier successivement les propriétés relatives aux flex Items

9 – Order

10 – Flex-Grow

11 – Flex-Shrink

12 – Flex-Basis

13 – Flex

14 – Align-Self

Coder un template Responsive en CSS FlexBox Dans cette dernière section, nous allons coder, étape par étape, un template responsive avec le CSS FlexBox. Cela nous aidera à mettre en pratique nos connaissances acquises tout au long de cette formation ;-)

15 – Exercices pratiques – Partie 1

16 – Exercices pratiques – Partie 2

17 – Exercices pratiques – Partie 3

18 – Exercices pratiques – Partie 4

19 – Exercices pratiques – Partie 5

20 – Exercices pratiques – Partie 6

21 – Exercices pratiques – Partie 7

22 – Exercices pratiques – Partie 8

Remerciements

Bravo !

Notes et avis de l’apprenant

Suivez-nous

Introduction et ressources
Introduction à la formation CSS FlexBox

Propriétés du Flex Container
Dans cette section, nous allons aborder successivement les propriétés relatives au flex Container

Propriétés du Flex Items
Dans cette section, nous allons étudier successivement les propriétés relatives aux flex Items

Coder un template Responsive en CSS FlexBox
Dans cette dernière section, nous allons coder, étape par étape, un template responsive avec le CSS FlexBox. Cela nous aidera à mettre en pratique nos connaissances acquises tout au long de cette formation ;-)