Maison > Article > interface Web > 10 codes sources de boîtes flexibles recommandés (collection)
Ajouter display: flex/inline-flex au conteneur parent. Les attributs qui peuvent être utilisés par le conteneur parent sont : 1.flex-direction : Il existe quatre valeurs d'attribut qui déterminent la direction du principal. axis : row (valeur par défaut) : l'axe principal est la direction horizontale, le point de départ à l'extrémité gauche. row-reverse : L'axe principal est horizontal et le point de départ est à l'extrémité droite. colonne : l'axe principal est vertical et le point de départ se trouve sur le bord supérieur. column-reverse : L'axe principal est vertical et le point de départ est au bord inférieur. 2.flex-wrap : Si une ligne d'axe ne peut pas être disposée, comment l'enrouler. Il y a 3 valeurs d'attribut : nowrap (par défaut) : pas de retour à la ligne. Lorsque le conteneur parent n'est pas assez large, chaque élément sera compressé de manière appropriée. wrap : wrap, la première ligne est en haut du conteneur parent. wrap-reverse : wrap, la première ligne est en bas du conteneur parent. 3.flex-flow : L'attribut est l'abréviation de l'attribut flex-direction et de l'attribut flex-wrap. La valeur par défaut est row nowrap. 4.justify-content : Définit l'alignement de l'élément sur l'axe principal.
Introduction : Cet article présente en détail certaines propriétés de la boîte flexible html5 et utilise des exemples pour illustrer comment utiliser la boîte flexible pour la mise en page.
2. Explication détaillée de la propriété CSS flex-flow du modèle de boîte flexible Flexible
Introduction : Cet article présente l'explication détaillée de la propriété CSS flex-flow du modèle de boîte flexible flexible
3. CSS flex- de l'attribut de direction du modèle de boîte flexible flexible
Introduction : Cet article présente le CSS flex- Attribut de direction du modèle de boîte flexible flexible
4 Attribut CSS align-items du modèle de boîte flexible
Introduction : Cet article présente principalement l'attribut CSS align-items du modèle de boîte flexible Flexible
Le CSS. Attribut align-self du modèle de boîte flexible Flexible
Introduction : Cet article présente principalement l'alignement CSS attribut personnel du modèle de boîte élastique flexible
6. Attribut CSS de justification de contenu de modèle de boîte flexible
Introduction : Cet article présente principalement l'attribut CSS justification-content du modèle de boîte flexible flexible
L'ordre CSS. attribut du modèle de boîte flexible Flexible
Introduction : Cet article présente principalement l'attribut d'ordre CSS de Flexible flexible modèle de boîte
8. 【CSS3】 CSS3 : Boîte flexible
Introduction : 【CSS3】 CSS3 : Flex Box
9 Disposition de boîte flexible en CSS3
Introduction : Dans CSS 3, le module CSS Flexible Box est un module très important, qui est utilisé pour implémenter le traitement de la mise en page de manière très flexible. Bien que d'autres attributs de style CSS puissent être utilisés pour implémenter le traitement de la mise en page, si vous utilisez la technologie de mise en page de boîte flexible définie dans le module CSS Flexible Box, le mode d'affichage de chaque zone locale de la page peut être automatiquement ajusté en fonction de la taille de l'écran ou Taille de la fenêtre du navigateur, c'est-à-dire gestion de la mise en page très flexible. Bien que le module CSS Flexible Box soit annoncé depuis plusieurs années, le contenu défini dans le module a subi plusieurs révisions majeures depuis sa sortie initiale. La version officielle actuellement annoncée est ◦CSS
10 Explication détaillée de la boîte flexible CSS Flexbox layout_html/css_WEB-ITnose
<.>Introduction : Explication détaillée de la disposition CSS Flexbox Flexbox
[Recommandations de questions et réponses associées] :
css - Lorsque le conteneur parent peut être librement développé, Comment implémenter une disposition de sous-conteneurs à trois colonnes de largeur égale
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!