Maison  >  Article  >  interface Web  >  Guide d'étude de la mise en page flexible CSS3 pour les pages Web mobiles

Guide d'étude de la mise en page flexible CSS3 pour les pages Web mobiles

高洛峰
高洛峰original
2017-03-09 17:21:511338parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn