Maison > Article > interface Web > Guide d'étude de la mise en page flexible CSS3 pour les pages Web mobiles
Flexbox nous permet généralement de mieux exploiter la mise en page de ses sous-éléments. Voici un bref résumé du guide d'étude de la mise en page flexible CSS3 pour les pages Web mobiles. Les amis dans le besoin peuvent s'y référer
1. , commencez à utiliser la disposition flexbox, le code est le suivant :
footer{ display:flex; }
2. Ensuite, ajoutez l'attribut flex-flow au pied de page :
flex-flow:row wrap;
row signifie l'affichage en lignes, et wrap définit s'il faut envelopper lorsque l'élément parent est trop petit.
Notez que flex-flow est défini avec les deux attributs flex-direction et flex-wrap. Ils peuvent également être définis séparément.
Attributs de flex-direction :
row : affichage des lignes ; column : affichage des colonnes ; row-reverse/column-reverse : affichage dans le sens inverse
3. - Attributs de l'article :
flex-start : Alignez la tête de chaque p
flex-end : Alignez la queue de chaque p
center : Alignez en fonction de la ligne centrale
stretch : Remplir toute la zone, c'est-à-dire que la tête et la queue sont alignées
4. L'attribut justification-content
est utilisé pour définir la forme de l'espace vide. Ligne de production, très pratique lorsque vous travaillez avec plusieurs pièces.
Par exemple, s'il y a trois petits p affichés côte à côte dans le p parent, mais que leur largeur totale est inférieure à la largeur totale du p parent, vous pouvez utiliser cette méthode pour la mise en page. Les paramètres spécifiques sont les suivants. :
flex-start : espace blanc À la toute fin
flex-end : La partie vierge est au tout début
Les deux méthodes de suppression ci-dessus traitent les trois petits p dans leur ensemble, laissant le blanc à une extrémité
espace entre : laissez l'espace uniformément au milieu
espace-autour : laissez l'espace uniformément des deux côtés au milieu
Les deux ci-dessus sont équivalents à diviser les trois blocs p et à les diviser également dans le parent p. La seule différence entre les deux est que ne pas laisser d'espace blanc des deux côtés
Pièce jointe : Comment utiliser justifier le contenu pour centrer l'élément verticalement et horizontalement
p{ justify-content:center; align-items:center; display:-webkit-flex; }
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!