Comment utiliser le nouvel attribut CSS display:box

Cette fois, je vais vous expliquer comment utiliser le nouvel attribut css display:box, et quelles sont les précautions d'utilisation du nouvel attribut css display:box Ce qui suit est un cas pratique, jetons un coup d'œil.

1. display:box;

Définissez cet attribut sur un élément pour organiser ses descendants sur le même niveau, similaire à display :inline -bloc;.

2. Vous pouvez définir les attributs suivants sur ses enfants

Prérequis : Pour utiliser les attributs suivants, display:box;

1.box-flex: number; les autres éléments de mot qui ne définissent pas de largeur fixe utiliseront la largeur parent restante (parent - la largeur totale des éléments enfants qui ont une largeur fixe défini en proportion du nombre

　3) Si l'élément enfant a une valeur de marge, alors selon le reste (largeur parent-enfant largeur totale fixe-valeur de marge totale), la largeur représente les parts numériques

　2.box-orient:horizontal/vertical

　 Définissez cet attribut sur le parent, Les enfants sont disposés horizontalement ou verticalement.

Remarque : tous les principaux navigateurs ne prennent pas en charge cet attribut et doivent être préfixés.

1) disposition horizontale, la largeur totale des enfants = la largeur du parent. Si le parent a une largeur fixe, la largeur définie par l'enfant n'est pas valide et l'enfant remplira la largeur du parent.

2) disposition verticale, la taille totale des enfants = la taille du parent. Si le parent a une taille fixe, la hauteur définie par l'enfant n'est pas valide et l'enfant remplira la taille du parent.

　3.box-direction:normal/reverse

　 Définissez cet attribut sur le parent pour confirmer l'ordre des enfants.

1) valeur normale par défaut, les enfants sont classés dans l'ordre HTML

2) ordre inverse inverse

4.box-align:start/end/center/stretch

Mise en place chez le parent, de l'alignement vertical des enfants.

1) début Alignement vertical du haut

2) fin Alignement vertical du bas

3) centre Alignement vertical du centre

4) étirement Étirer l'enfant Hauteur, conforme à la hauteur fixée par le parent. La taille de l'enfant n'est pas valide.

　5.box-pack:start/end/center

　 Définir dans le parent, l'alignement horizontal des enfants.

1) début Alignement horizontal à gauche

2) fin Alignement horizontal à droite

3) centre Alignement horizontal au centre

Je crois que vous avez lu le cas dans cet article Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment ajouter un bouton de bannière dans DW

Optimisation des performances de base des pages Web frontales

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!