Dans le cours : CSS : Maîtriser les Flexbox

Accédez au cours complet aujourd’hui

Inscrivez-vous aujourd’hui pour accéder à plus de 24 100 cours dispensés par des experts.

Aborder la propriété flex-flow

Aborder la propriété flex-flow

Les propriétés flex-direction et flex-wrap me permettent de mettre en place les deux axes de mon conteneur flex, l'axe principal pour la propriété flex-direction et l'axe secondaire pour la propriété flex-wrap. Ces deux propriétés sont déterminantes pour la manière dont le conteneur flex va positionner ces éléments flex. Elles sont souvent utilisées ensemble, et donc le langage CSS nous propose une notation raccourcie qui permet de définir ces deux propriétés en une seule ligne de code. Il s'agit de la propriété flex-flow. Vous allez commencer par définir flex-direction. Dans mon cas, ce sera row, puis un espace, et vous définissez flex-wrap. Ici, ce sera wrap. Je n'ai plus besoin des deux lignes de code précédentes, je peux les supprimer. Flex-flow : row wrap, mon axe principal va de gauche à droite, c'est row, et mon axe secondaire va de haut en bas, c'est wrap. Au niveau de mon document, vous avez donc deux rangées d'éléments. Les éléments sont placés de gauche à droite sur l'axe…

Table des matières