Une des méthodes pour développer un modèle de boîte flexible CSS3

Cet article partage principalement les notes de développement du modèle de boîte flexible CSS3 avec tout le monde et présente la compatibilité et les différents attributs. Les amis intéressés peuvent se référer au

Modèle de boîte flexible (Flexible Box Moudle) , qui. est utilisé pour décider de la manière dont les éléments sont répartis dans une boîte et pour gérer l'espace disponible dans la boîte. Ceci est similaire à XUL (le langage d'interaction utilisateur du navigateur Firefox), et d'autres langages utilisent le même modèle de boîte. Tels que XAML, GladeXML, etc. Le modèle flexbox permet de créer facilement une mise en page fluide qui s'adapte à la fenêtre du navigateur ou une mise en page flexible qui s'adapte à la taille de la police.

Compatibilité : La spécification du modèle de boîte flexible a été publiée par l'organisation de normalisation W3C en 2009. Actuellement, aucun navigateur grand public ne la prend en charge, mais elle utilise le rendu Webkit et Mozilla. Les navigateurs du moteur ont personnalisé un ensemble de propriétés privées pour prendre en charge le modèle de boîte flexible.

Les navigateurs qui utilisent le moteur de rendu Webkit incluent principalement les navigateurs Safari et Chrome. Le moteur prend en charge les attributs privés préfixés par -webkit.

Les navigateurs du moteur de rendu Mozilla incluent principalement le navigateur Firefox, qui prend en charge les attributs privés préfixés par -moz.

Attributs associés :

box-align : Définir la méthode d'allocation d'espace des éléments enfants dans le sens vertical de la boîte
box-direction : Définir l'ordre d'affichage de la boîte
box-flex : définissez la taille adaptative des sous-éléments dans la boîte
box-flex-group : définissez des groupes de sous-éléments adaptatifs
box-lines : définissez les sous-éléments à afficher dans les colonnes
box-ordinal-group : Définir les sous-éléments La position d'affichage de l'élément dans la boîte
box-orient : définit l'axe de coordonnées de la division de la boîte
box-pack : définit la méthode d'allocation d'espace horizontale du sous -elements in the box

box -attribut orient

Cet attribut peut être utilisé pour définir la direction de disposition du flux à l'intérieur de l'élément box. Lors de l'utilisation du modèle de boîte flexible, vous devez d'abord définir l'attribut d'affichage du conteneur parent sur box ou inline-box.
Syntaxe :

box-orient : horizontal | vertail | inline-axis | block-axis | hériter

Description simple de la valeur :

horizontal : élément de boîte de Affiche ses éléments enfants sur une ligne horizontale de gauche à droite.

vertail : L'élément box affiche ses éléments enfants dans une ligne verticale de haut en bas.

inline-axis : L'élément box affiche ses enfants le long de l'axe inline.

block-axis : L'élément box affiche ses éléments enfants le long de l'axe du bloc.

Expérience pratique : conception d'une mise en page multi-colonnes

Code HTML :

<p id="box">  
    <p id="box0"><img src="images/web_01.gif" /></p>  
    <p id="sub-box">  
        <p id="box1"><img src="images/web_02.gif" /></p>  
        <p id="box2"><img src="images/web_03.gif" /></p>  
        <p id="box3"><img src="images/web_04.gif" /></p>  
    </p>  
</p>

Code CSS3 :

<style type="text/css">   
body{/*文档样式*/  
    margin:0;padding:0px;/*清除页边距*/  
    text-align:center;/*文档居中对齐*/  
    background:#170843;   
}   
#box{   
    margin:auto;/*文档居中对齐*/  
    text-align:center;   
    width:975px;   
}   
/*定制各个栏目的宽度*/  
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
/*定制子包含框的盒子显示，其包含的元素水平流动*/  
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
</style>

Effet démo :

attribut box-direction

L'attribut box-direction peut modifier l'ordre de flux des éléments internes dans l'élément box La syntaxe de base de. cet attribut :

box-direction : normal | reverse | la valeur d'attribut de l'élément box est horizontale, alors ses sous-éléments contenus sont affichés dans l'ordre de gauche à droite, c'est-à-dire que le côté gauche de chaque sous-élément est toujours proche du côté droit du sous-élément précédent ; si la valeur de l'attribut box-origent de l'élément box est définie sur vertical, les sous-éléments qu'il contient sont affichés dans l'ordre de gauche à droite. Affichés dans l'ordre de haut en bas.

reverse : Affichage inversé, l'ordre d'affichage des sous-éléments contenus dans la boîte sera inversé par rapport à la normale.

hériter : hériter de l'ordre d'affichage des éléments supérieurs.

Expérience pratique : page web à mise en page inversée (basée sur le cas ci-dessus) :

Code CSS3 :

Effet démo :

<style>   
body{   
    margin:0;padding:0px;   
    text-align:center;   
    background:#170843;   
}   
#box{   
    margin:auto;   
    text-align:center;   
    width:975px;   
}   
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
    box-direction:reverse;   
    -moz-box-direction:reverse;   
    -webkit-box-direction:reverse;   
}   
</style>

attribut box-ordinal-group

  L'attribut box-direction peut modifier l'ordre de flux des éléments à l'intérieur de la boîte, et l'attribut box-ordinal-group peut définir chaque enfant La position d'affichage spécifique de l'élément dans la boîte, la syntaxe est la suivante : box-ordinal-group :

Description de la valeur :

La valeur de l'attribut est un nombre naturel, à partir de 1, elle est utilisée pour définir le symbole de position de l'élément enfant. La distribution des éléments enfants sera organisée de petite à grande en fonction de cette valeur d'attribut. Par défaut, les éléments enfants seront organisés en fonction de la position de l'élément.

Remarque : s'il n'y a aucun élément enfant avec une valeur d'attribut box-ordinal-group spécifiée, son numéro de séquence sera par défaut 1 et les éléments avec le même numéro de séquence seront classés dans l'ordre dans lequel ils sont chargés dans le document.

Expérience pratique : mise en page web verticale

Code HTML :

Code CSS3 :

<p id="box">  
    <p id="box1"><img src="images/web1_01.gif" /></p>  
    <p id="box2"><img src="images/web1_02.gif" /></p>  
    <p id="box3"><img src="images/web1_03.gif" /></p>  
    <p id="box4"><img src="images/web1_04.gif" /></p>  
</p>

Effet démo

<style type="text/css">   
body {   
    margin:0;   
    padding:0;   
    text-align:center;   
    background:#d9bfe8;   
}   
#box {   
    margin:auto;   
    text-align:left;   
    width:988px;   
}   
/*定义盒形显示及盒内元素垂直显示*/  
#box {   
    display : -moz-box;   
    display : -webkit-box;   
    display : box;   
    box-orient:vertical;   
    -moz-box-orient:vertical;   
    -webkit-box-orient:vertical;   
}   
/*根据网页内容的现实需要，借助弹性盒模型调整各个板块的显示顺序*/  
#box1 {/*设置第一个元素显示在第二个位置*/  
    -moz-box-ordinal-group : 2;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 2;/*兼容Webkit引擎*/  
    box-ordinal-group : 2;/*标准用法*/  
}   
#box2 {/*设置第二个元素显示在第三个位置*/  
    -moz-box-ordinal-group : 3;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 3;/*兼容Webkit引擎*/  
    box-ordinal-group : 3;/*标准用法*/  
}   
#box3 {/*设置第三个元素显示在第一个位置*/  
    -moz-box-ordinal-group : 1;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 1;/*兼容Webkit引擎*/  
    box-ordinal-group : 1;/*标准用法*/  
}   
#box4 {/*设置第四个元素显示在第四个位置*/  
    -moz-box-ordinal-group : 4;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 4;/*兼容Webkit引擎*/  
    box-ordinal-group : 4;/*标准用法*/  
}   
</style>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utiliser CSS3 pour réaliser la page d'accueil cool du chat noir Sheriff

Utiliser CSS pour réaliser des nombres en anglais pur Enroulement automatique de la ligne

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!