Résumé de l'utilisation de la disposition multi-colonnes CSS3, de la disposition des boîtes, de la disposition des boîtes flexibles et de la méthode de calcul

Cet article vous présente un résumé de l'utilisation de la disposition multi-colonnes CSS3, de la disposition des boîtes, de la disposition des boîtes flexibles et de la méthode de calcul. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous.

1 Disposition multi-colonnes

L'utilisation de la disposition multi-colonnes peut diviser le contenu d'un élément en deux colonnes ou plusieurs colonnes pour l'affichage, et assurez-vous que le contenu de chaque colonne est aligné en bas.

attribut de nombre de colonnes

En CSS3, cet attribut est utilisé pour utiliser la mise en page multi-colonnes La signification de cet attribut est de diviser le contenu d'un élément en plusieurs colonnes pour. afficher.

(1) Écriture du navigateur

Firefox : "-moz-column-count"

Safari, Chorme, Opera : "-webkit-column-count"

Pas besoin d'ajouter un préfixe dans IE.

(2) Lorsque vous utilisez une mise en page à plusieurs colonnes, vous devez définir la largeur de l'élément sur la largeur totale de plusieurs colonnes.

attribut de largeur de colonne

Vous pouvez également utiliser cet attribut pour définir la largeur de chaque colonne individuellement sans définir la largeur de l'élément .

(1) Écriture du navigateur

Firefox : "-moz-column-width"

Safari, Chorme, Opera : "-webkit-column-width"

Pas besoin d'ajouter un préfixe dans IE.

column-count：2；
-moz-column-count：2；
-webkit-column-count：2；
column-width：20em；
-moz-column-width：20em；
“-webkit-column-width：20em；

(2) Pour utiliser cet attribut pour spécifier la largeur de chaque colonne sans définir la largeur de l'élément, vous devez configurer un élément conteneur distinct à l'extérieur de l'élément, puis spécifier la largeur de l'élément conteneur, sinon La largeur de colonne spécifiée est considérée comme non définie par le navigateur .

attribut d'espacement de colonne

(1) Fonction

Définir la distance d'espacement entre plusieurs colonnes

(1) Écriture du navigateur

Firefox : "- moz-column-gap"

Safari, Chorme : "-webkit-column-gap"

Aucun préfixe requis dans IE.

column-gap：3em；
-moz-column-gap：3em；
-webkit-column-gap：3em；

attribut de règle de colonne

(1) Fonction

Ajoutez une ligne d'espacement entre les colonnes et définissez la largeur, la couleur, etc. de la ligne d'espacement. (Identique à la spécification de la valeur de l'attribut border)

column-rule：1px solid red；
-moz-column-rule：1px solid red；
-webkit-column-rule：1px solid red；

2 Disposition de la boîte

attribut de la boîte

En CSS3, utilisez cet attribut pour utiliser la disposition des boîtes

(1) Écriture du navigateur

Firefox : "-moz-box"

Safari, Chorme, Opera : "-webkit-box"

display：-moz-box；
display：-webkit-box；

(2) La différence entre la disposition en boîte et la disposition multi-colonnes

1. layout , La largeur de chaque colonne doit être égale Lorsque vous spécifiez la largeur de chaque colonne, vous ne pouvez spécifier qu'une largeur uniforme pour toutes les colonnes. Les largeurs entre les colonnes ne peuvent pas être différentes.

2. Lors de l'utilisation d'une mise en page multi-colonnes, il est impossible de spécifier quel contenu afficher dans quelle colonne , elle est donc plus adaptée à l'affichage du contenu de l'article, mais ne convient pas à l'organisation. la page Web entière lorsque la structure de la page est composée de divers éléments.

3 Disposition de boîte flexible

Si vous souhaitez que la largeur totale des trois éléments div soit égale à la largeur de la fenêtre du navigateur et puisse changer en fonction de la fenêtre la largeur change, comment la régler ?

attribut flex

Transformez la disposition de la boîte en disposition de boîte flexible

#container{
display：flex；
}
#left-sidebar{
width：200px；
padding：20px；
background-color：orange；
}
#contents{
flex：1；
padding：20px；
background-color：yellow；
}
#right-sidebar{
width：200px；
padding：20px；
background-color：limegreen；
}

attribut de commande

(1) Fonction

Modifier l'ordre d'affichage de chaque élément . Vous pouvez ajouter l'attribut order au style de chaque élément. Cet attribut utilise une valeur d'attribut entière qui représente le numéro de série. Lors de l'affichage, le navigateur affiche ces éléments du plus petit au plus grand en fonction du numéro de série.

#container{
display：flex；
}
#left-sidebar{
order：3；
}
#contents{
flex：1；
order：1；
}
#right-sidebar{
order：2；
}

Propriété flex-direction

(1) La fonction

modifie la direction de disposition des éléments.

(2) valeur

ligne : disposée horizontalement (valeur par défaut). row-reverse : disposition inversée horizontalement.

colonne : disposée verticalement. Colonne inversée : disposition verticale et inversée.

#container{
display：flex；
flex-direction：column；
}

Hauteur et largeur adaptatives des éléments

(1) Lors de l'utilisation de la disposition en boîte, la hauteur et la largeur des éléments sont adaptatives, c'est-à-dire que la largeur et la hauteur des éléments peuvent changer en fonction des changements dans la direction de la disposition.

(2) Lorsqu'il y a un élément conteneur, il y a trois éléments p dans l'élément, et seules la largeur et la hauteur sont spécifiées pour l'élément conteneur. Par conséquent, lorsque la direction de disposition est spécifiée comme direction. direction horizontale, le des trois éléments La largeur est la largeur du contenu dans l'élément, et la hauteur devient automatiquement la hauteur du conteneur . la direction de la disposition est spécifiée comme la direction verticale, la hauteur est la hauteur du contenu dans l'élément, et la largeur de devient automatiquement la largeur de le contenant . (Il y a de grands espaces blancs)

Utilisez la disposition flexbox pour éliminer les espaces blancs

（1）使得多个参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

#container{
display：flex；
}
#contents{
flex：1；
}

如果使用弹性盒布局，使用了box-flex属性的元素的宽度与高度总会自动扩大，使得参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

（2）可对多个元素使用flex属性

flex-grow属性

（1）功能

指定元素宽度或高度。

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-grow：1；
}
#contents{
flex-grow：1；
}
#right-sidebar{
flex-grow：3；
}

flex-shrink属性

（1）功能

指定元素宽度或高度。

（2）与flex-grow属性关系

当元素排列方向为横向排列时：如果子元素的width样式属性值的总和小于容器元素的宽度值，必须通过flex-grow属性（加上加权空白）来调整子元素宽，若大于则必须通过flex-shrink属性（减去加权超出部分）来调整子元素宽度。

当元素排列方向为纵向排列时：如果子元素的height样式属性值的总和小于容器元素的高度值，必须通过flex-grow属性来调整子元素宽，若大于则必须通过flex-shrink属性来调整子元素宽度。

结果：参与排列的元素的总宽度与总高度始终等于容器的宽度和高度

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-shrink：1；
}
#contents{
flex-shrink：1；
}
#right-sidebar{
flex-shrink：3；
}

flex-basis属性

（1）功能

指定调整前的子元素宽度，与width属性的作用完全相同。

属性合并

（1）flex：flex-grow样式属性值    flex-shrink样式属性值    flex-basis样式属性值；（均为可选样式属性）

（2）不指定flex-grow， flex-shrink时，默认样式属性值为1；flex-grow， flex-shrink 默认样式值为 0px；

（3）子元素为横向排列时，flex-grow， flex-shrink、flex-grow， flex-shrink、flex均用于指定或调整子元素的宽度；为纵向排列时，则用于指定或调整子元素的高度。

flex:250px;//元素宽度为250px；
flex：1 3 250px；

flex-wrap属性

（1）功能

指定单行布局或多行布局

（2）属性值

nowrap：不换行。               wrap：换行。

wrap-reverse：虽然换行，但是换行方向与使用wrap样式属性值时的换行方向相反。

#container{
display：flex；
border:solid 5px blue;
flex-direction:row;
flex-wrap：wrap；
}

flex-flow属性

可以将flex-direction属性值与flex-wrap属性合并书写在该属性中。

{
flex-direction：row；
flex-wrap：wrap；
}
等价于：
{
flex-flow：row wrap；
}

指定水平方向与垂直方向的对齐方式

justify-content属性

（1）功能

用于指定如何布局容器中除了子元素之外的main axis（横向布局时为水平方向，纵为垂直方向）上的剩余空白部分。

（2）当flex-grow属性不为0时，各子元素在main axis轴方向上自动填满容器，所以justify-content属性值无效。

（3）属性值

flex-start：从main-start开始布局所有子元素（默认）

flex-end：从main-end开始布局所有子元素。

center：居中布局所有子元素。

space-between：将第一个子元素布局在main-start处，将最后一个子元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。

space-around：将空白部分平均分配在以下几处，如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
height：30px；
justify-content：flex-start；
}

align-items属性

（1）功能

用于指定子元素对齐方式，指定的是cross axis轴方向（横为垂直，纵为水平）。（容器元素的样式属性）

（2）属性值

flex-start：从cross-start开始布局所有子元素（默认）

flex-end：从cross-end开始布局所有子元素。

center：居中布局所有子元素。

baseline：如果子元素的布局方向与容器的布局方向不一致，则该值得作用等效于flex-start属性值的作用。否则，所有子元素中的内容沿基线对齐。

stretch：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度（当考虑元素边框及内边距时，当边框宽度与内边距均为0则等于容器高度）。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
align-items：flex-start；
}

align-self属性

（1）功能

用于单独指定某些子元素的对齐方式。

（2）属性值

auto：继承父元素的align-items属性值。

其他可指定属性值同align-items属性的可指定属性值。

align-content 属性

（1）功能

在进行多行布局时，可以使用该属性指定各行对齐方式。

（2）属性值

flex-start：从cross-start开始布局所有子元素（默认）

flex-end：从cross-end开始布局所有子元素。

center：居中布局所有子元素。

space-between：将第一行布局在cross-start处，将最后一行布局在cross-end处，将空白部分平均分配在各行之间。

space-around：将空白部分平均分配在以下几处，如cross-start与第一行之间、各行与子元素行之间、最后一行与cross-end之间。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
flex-wrap：wrap；
width：300px；
height：400px；
align-conten：flex-start；
}

4 calc方法

（1）作用

可以通过该方法来自动计算元素的宽度、高度等数值类型的样式属性值。

（2）浏览器支持

到目前为止：Safari6以上、Chrome19以上 、Firefox8以上、Opera12以上、IE9以上浏览器支持该方法。 

#container{
width：500px；
background-color：pink；
}
#foo{
width：calc（50%-100px）；
background-color：green；
}

（3）可以用来对各种不同的计数单位进行混合运算

#container{
height：calc（10em+3px）；
}

相关推荐：

css3 -webkit-flex 布局_html/css_WEB-ITnose

CSS3实现瀑布流布局的方法

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!