Différence entre «justifier-contenu» et «Align-Items»

Lors de la création d'un site Web, il est nécessaire de prendre en considération la disposition des éléments. Le "afficher la flexion«La propriété dans CSS rend l'élément flexible, et son contenu est justifié et aligné facilement si le contenu n'utilise pas tout l'espace disponible. Le "justifier»La propriété spécifie les éléments sur l'axe des x, tandis que le«align-items»La propriété aligne les éléments sur l'axe y.

Ce manuel démontrera la différence entre «justifier" et "align-items”Du conteneur flexible.

Différence entre «justifier-contenu» et «Align-Item» dans CSS

Le CSS "justifier”La propriété spécifie comment le navigateur alloue l'espace entre et autour des éléments de contenu le long de l'axe principal d'un conteneur flexible et l'axe en ligne d'un conteneur de grille. Cependant, le "align-items»La propriété définit les éléments de l'axe Y dans le Flexbox. Dans la disposition de la grille, il définit l'alignement du contenu sur l'axe des blocs.

Valeurs pour la propriété «justifier-contenu»

Le "justifier»La propriété peut avoir des valeurs répertoriées ci-dessous:

• centre
• l'espace entre
• espace-même
• spatial
• démarrer en flexion
• flexion
• initial
• Hériter

Valeurs pour la propriété «Align-Items»

Le "align-items»La propriété peut avoir des valeurs répertoriées ci-dessous:

• centre
• extensible
• base de base
• démarrer en flexion
• flexion
• initial
• Hériter

Comment justifier le contenu avec CSS?

Pour justifier le contenu en HTML en utilisant CSS, le «justifier" et "align-items»Des propriétés sont utilisées. Pour la démonstration, nous avons fourni l'exemple dans lequel le principal «div"Est appliqué avec la propriété"afficher«Valeur comme«fléchir". Cette propriété fera le «div”Flexible à ses articles. L'autre boîte à l'intérieur du principal "div"La boîte sera justifiée et alignée en fonction des valeurs.

Suivez les étapes déclarées pour une meilleure compréhension.

Étape 1: Créer une page HTML

Tout d'abord, créez une page HTML et ajoutez les éléments suivants:

• Ajouter un ""Élément avec le nom de classe"boîte".
• À l'intérieur de ceci "«Conteneur, ajoutez un autre« »et attribuez-lui une classe«box-1»:

Étape 2: Style d'abord l'élément «div»

Pour le style du premier "div«Élément, accédez-y dans CSS à l'aide de la classe attribuée».boîte". Ensuite, appliquez les propriétés codées ci-dessous:

.boîte
Border: 2px Blueviolet solide;
Largeur: 500px;
hauteur: 250px;
marge: 40px automatique;
Affichage: flex;

Voici l'élaboration de l'extrait de code ci-dessus:

• "frontière«La propriété est utilisée pour ajuster la bordure autour de la div.
• "largeur«Propriété avec une valeur de«500px”Définit la largeur de la boîte div.
• "hauteur«La propriété définit la hauteur du« div »à«250px".
• "marge"Spécifie un espace de"40px"En haut et en bas.
• "afficher»La propriété définit le comportement de l'écran. La valeur "fléchir"Rend cette div flexible à ses articles.

Étape 3: style deuxième élément «div»

Accédez à une seconde "div"À travers la classe attribuée".box-1»Et appliquez le CSS suivant dessus:

.Box-1
Largeur: 100px;
hauteur: 100px;
Color en arrière-plan: chocolat;

Le "largeur" et "hauteur»Des propriétés sont appliquées. Puis le "Couleur de l'arrière plan»La propriété s'applique pour définir la couleur dans l'arrière-plan de l'élément:

Étape 4: Appliquer la propriété «justifier»

Pour justifier le contenu, nous avons appliqué le «justifier«Propriété comme«centre"Sur le principal"div". Cette propriété aligne son contenu en fonction de la valeur qui lui est donnée:

.boîte
Border: 2px Blueviolet solide;
Largeur: 500px;
hauteur: 250px;
marge: 40px automatique;
Affichage: flex;
Justification-contenu: centre;

De l'image ci-dessous, il peut observer que le principal «div"Aligne son contenu"box-1”Div au centre de l'axe X:

Étape 5: Appliquer la propriété «Align-Items»

Le "align-items»La propriété définit les éléments de l'axe Y dans le Flexbox. Dans le CSS, nous avons ajouté la propriété «Align-Items» comme «centre«Pour aligner le contenu au centre le long de l'axe des y:

.boîte
Border: 2px Blueviolet solide;
Largeur: 500px;
hauteur: 250px;
marge: 40px automatique;
Affichage: flex;
Justification-contenu: centre;
Align-Items: Centre;

Vous pouvez voir cela, nous avons réussi à justifier le contenu avec CSS:

Nous avons démontré la différence entre justifier-contenu et Align-Item et comment les utiliser pour justifier le contenu.

Conclusion

Les propriétés "justifier" et "align-items»Sont utilisés pour spécifier comment le navigateur affiche le contenu. La propriété Justify-Content ajoute les marges autour et entre les éléments le long de l'axe X du conteneur Flex et l'axe en ligne du conteneur de la grille. Cependant, le "align-items»La propriété définit les éléments de l'axe Y dans le Flexbox. Ce message a développé la différence entre justifier-contenu et align-item et comment les utiliser pour justifier le contenu.