CSS3多栏布局、盒布局和弹性盒布局怎么实现

本篇内容介绍了“CSS3多栏布局、盒布局和弹性盒布局怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　1多栏布局

　　使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐。

　　column-count属性

　　在CSS3中，通过该属性来使用多栏布局方式，该属性的含义是将一个元素中的内容分为多栏进行显示。

　　（1）浏览器书写

　　Firefox：“-moz-column-count”

　　Safari、Chorme、Opera：“-webkit-column-count”

　　IE中不需添加前缀。

　　（2）使用多栏布局时，需要将元素的宽度设置成多个栏目的总宽度。

　　column-width属性

　　也可以使用该属性单独设置每一栏的宽度而不设定元素的宽度。

　　（1）浏览器书写

　　Firefox：“-moz-column-width”

　　Safari、Chorme、Opera：“-webkit-column-width”

　　IE中不需添加前缀。

　　column-count：2；

　　-moz-column-count：2；

　　-webkit-column-count：2；

　　column-width：20em；

　　-moz-column-width：20em；

　　“-webkit-column-width：20em；

　　（2）使用该属性指定每栏宽度而不设定元素的宽度，则需要在元素外面单独设立一个容器元素，然后指定该容器元素的宽度，否则指定的每栏宽度被浏览器视为未作设定。

　　column-gap属性

　　（1）功能

　　设定多栏之间的间隔距离

　　（1）浏览器书写

　　Firefox：“-moz-column-gap”

　　Safari、Chorme：“-webkit-column-gap”

　　IE中不需添加前缀。

　　column-gap：3em；

　　-moz-column-gap：3em；

　　-webkit-column-gap：3em；

　　column-rule属性

　　（1）功能

　　在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、颜色等。（与border属性的属性值指定方法相同）

　　column-rule：1pxsolidred；

　　-moz-column-rule：1pxsolidred；

　　-webkit-column-rule：1pxsolidred；

　　2盒布局

　　box属性

　　在CSS3中，通过该属性来使用盒布局

　　（1）浏览器书写

　　Firefox：“-moz-box”

　　Safari、Chorme、Opera：“-webkit-box”

　　display：-moz-box；

　　display：-webkit-box；

　　（2）盒布局与多栏布局的区别

　　1.使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。

　　2.使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的页面结构的时候。

　　3弹性盒布局

　　如果想让三个div元素的总宽度等于浏览器窗口的宽度，而且能够随着窗口宽度的改变而改变时，该怎么设定呢？

　　flex属性

　　使盒布局变为弹性盒布局

　　#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；

　　}

　　order属性

　　（1）功能

　　改变各元素的显示顺序。可以在每个元素的样式中加入order属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大显示这些元素。

　　#container{

　　display：flex；

　　}

　　#left-sidebar{

　　order：3；

　　}

　　#contents{

　　flex：1；

　　order：1；

　　}

　　#right-sidebar{

　　order：2；

　　}

　　flex-direction属性

　　（1）功能

　　改变元素的排列方向。

　　（2）值

　　row：横向排列（默认值）。row-reverse：横向反向排列。

　　column：纵向排列。column-reverse：纵向反向排列。

　　#container{

　　display：flex；

　　flex-direction：column；

　　}

　　元素高度与宽度的自适应

　　（1）使用盒布局的时候，元素的高度与宽度具有自适应性，即元素的宽度与高度可以根据排列方向的改变而改变。

　　（2）当有一个容器元素，元素中有三个p元素，只对容器元素指定了宽度和高度，结果当排列方向被指定为水平方向时，三个元素的宽度为元素中内容的宽度，高度自动变为容器的高度，当排列方向被指定为垂直方向时，三个元素的高度为元素中内容的高度，宽度自动变为容器的宽度。（存在大片空白区域）

　　使用弹性盒布局来消除空白

　　（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：13250px；

　　flex-wrap属性

　　（1）功能

　　指定单行布局或多行布局

　　（2）属性值

　　nowrap：不换行。wrap：换行。

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

　　#container{

　　display：flex；

　　border:solid5pxblue;

　　flex-direction:row;

　　flex-wrap：wrap；

　　}

　　flex-flow属性

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

　　{

　　flex-direction：row；

　　flex-wrap：wrap；

　　}

　　等价于：

　　{

　　flex-flow：rowwrap；

　　}

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

　　justify-content属性

　　（1）功能

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

　　（2）当flex-grow属性不为0时，各子元素在mainaxis轴方向上自动填满容器，所以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：solid5pxblue；

　　flex-direction：row；

　　width：600px；

　　height：30px；

　　justify-content：flex-start；

　　}

　　align-items属性

　　（1）功能

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

　　（2）属性值

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

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

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

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

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

　　#content{

　　display：flex；

　　border：solid5pxblue；

　　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：solid5pxblue；

　　flex-direction：row；

　　flex-wrap：wrap；

　　width：300px；

　　height：400px；

　　align-conten：flex-start；

　　}

　　4calc方法

　　（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多栏布局、盒布局和弹性盒布局怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！