6 2 Proprietes Flexbox Flex Direction Justify Content Align Items

Propriétés Flexbox : `flex-direction`, `justify-content`, `align-items`

Les propriétés flex-direction, justify-content, et align-items sont des éléments fondamentaux de Flexbox en CSS. Elles permettent de contrôler la direction, l'alignement et la répartition des éléments flexibles à l'intérieur d'un conteneur flexible.

1. `flex-direction`

La propriété flex-direction définit la direction principale dans laquelle les éléments flexibles sont placés à l'intérieur du conteneur flexible. Les valeurs possibles sont :

row : Les éléments sont disposés horizontalement de gauche à droite (par défaut).
row-reverse : Les éléments sont disposés horizontalement de droite à gauche.
column : Les éléments sont disposés verticalement de haut en bas.
column-reverse : Les éléments sont disposés verticalement de bas en haut.

2. `justify-content`

La propriété justify-content contrôle l'alignement des éléments flexibles le long de l'axe principal du conteneur flexible. Les valeurs possibles sont :

flex-start : Les éléments sont alignés au début de l'axe principal.
flex-end : Les éléments sont alignés à la fin de l'axe principal.
center : Les éléments sont centrés le long de l'axe principal.
space-between : Les éléments sont répartis de manière égale le long de l'axe principal, avec un espacement égal entre eux.
space-around : Les éléments sont répartis de manière égale le long de l'axe principal, avec un espacement égal autour d'eux.

3. `align-items`

La propriété align-items contrôle l'alignement des éléments flexibles le long de l'axe transversal du conteneur flexible. Les valeurs possibles sont :

flex-start : Les éléments sont alignés au début de l'axe transversal.
flex-end : Les éléments sont alignés à la fin de l'axe transversal.
center : Les éléments sont centrés le long de l'axe transversal.
baseline : Les éléments sont alignés en fonction de leur ligne de base.
stretch : Les éléments sont étirés pour remplir le conteneur flexible le long de l'axe transversal.

4. Exemple d'utilisation

Voici un exemple illustrant l'utilisation de ces propriétés :

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
}
 
.item {
    padding: 10px;
    background-color: lightblue;
    border: 1px solid blue;
}

Dans cet exemple, les éléments à l'intérieur du conteneur sont disposés verticalement (flex-direction: column;) et centrés à la fois horizontalement et verticalement dans le conteneur (justify-content: center; et align-items: center;).

Conclusion

Les propriétés flex-direction, justify-content, et align-items sont essentielles pour contrôler la disposition et l'alignement des éléments flexibles à l'intérieur d'un conteneur flexible en CSS. En comprenant comment les utiliser et en expérimentant avec différentes valeurs, vous pouvez créer des mises en page flexibles et réactives qui s'adaptent à diverses exigences de conception web. Continuez à explorer Flexbox et à pratiquer son utilisation pour améliorer vos compétences en conception web.

6 1 Introduction Au Flexbox 6 3 Introduction a CSS Grid

Propriétés Flexbox : flex-direction, justify-content, align-items

1. flex-direction

2. justify-content