Que signifie flexbox en HTML5

En HTML5, flexbox est une méthode de mise en page qui garantit que les éléments ont un comportement approprié lorsque la page doit s'adapter à différentes tailles d'écran et types d'appareils ; le but de l'introduction de la mise en page flexbox est de fournir un moyen plus efficace de mettre en page un élément Organiser, aligner. , et allouez un espace blanc aux éléments enfants dans le conteneur.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Que signifie flexbox ?

FlexibleBox (FlexibleBox ou flexbox) est une méthode de mise en page qui garantit que les éléments ont un comportement approprié lorsque la page doit s'adapter à différentes tailles d'écran et types d'appareils.

Le but de l'introduction du modèle de disposition flexbox est de fournir un moyen plus efficace d'organiser, d'aligner et d'attribuer un espace vide aux sous-éléments d'un conteneur.

Peut répondre de manière simple à de nombreux besoins d'aménagement complexes courants. Son avantage est que les développeurs déclarent uniquement le comportement que doit avoir la mise en page, sans donner de méthodes d'implémentation spécifiques. Le navigateur est responsable de la mise en page proprement dite. Ce modèle de mise en page est pris en charge dans les principaux navigateurs.

Attributs de base de la boîte flexible :

** Disposition de la boîte flexible : display : flex ; ou display : inline-flex ; -block;, ( L'élément parent peut-il être affiché sur une seule ligne ?)

Le rôle de la boîte flexible : les éléments enfants peuvent être affichés sur une seule ligne. Par défaut, x est l'axe principal et y est l'axe latéral (secondaire). axis)

Ainsi, les éléments enfants seront affichés sur une ligne par défaut, similaire à In float: lef; disposition pratique

Après l'avoir défini comme une boîte flexible :

1. sur l'axe principal par défaut ;

2. La largeur et la hauteur des éléments enfants peuvent être définies (similaire à display : inline -block ;)

3. veut être centré en haut, en bas, à gauche et à droite, vous n'avez besoin que de margin: auto;

L'impact sur l'élément enfant lorsque la boîte flexible est définie:

1. Élément enfant Le float et clear dessus sont invalide ;

2. Le sous-élément vertical : -align : (alignement vertical de l'élément) n'est pas valide.

Attributs ajoutés à l'élément parent (ajoutés à l'élément parent, affectant les éléments enfants)

                                                                                                                                                                         avec direction flexible : rangée -inversion de l'axe principal horizontal

          flexion-dérection : inversion de l'axe principal vertical ;

 

Si l'élément enfant enveloppe le flex-wrap :


      1. wrap line wrap ;
  2. no-warp : pas de retour à la ligne ;   3. wrap-reverse ; :; (Définissez la méthode de retour à la ligne de l'axe principal) (Ce paramètre n'est pas recommandé car il affectera la lisibilité du code)

justify-content: ; Alignement des éléments enfants sur l'axe principal : ajoutez

au élément parent 1. flex-start; position de départ

2. flex-end; end position
3. center; middle position 4. space-around; Automatiquement alloué
5. space-between; le milieu ;

align-items :; Alignement des éléments enfants sur l'axe latéral (ajouté à l'élément parent)

1. flex-start; 2. flex-end position
3. center; position médiane
4. ligne de base ; alignement de la ligne de base

5. étirement ; alignement de la position par défaut

 éléments multilignes sur l'axe latéral Méthode d'alignement, les éléments multilignes sont valides

1. flex-start ; alignement supérieur ;
2. extrémité flexible ; alignement inférieur ;
3. alignement central ;
4. espace alloué automatiquement ;

6. étirement ; alignement de la position par défaut ;

item (alignement des éléments enfants) (ajouter aux éléments enfants)

                                                                                                 Remarque : Si l'élément parent possède ce paramètre d'attribut, il héritera de l'alig-ite. ms : paramètre d'attribut


Recommandations associées :
Tutoriel vidéo HTML
,
Tutoriel vidéo CSS

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!