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!