CSS3布局实现多栏布局&盒布局&弹性盒布局&calc的方法

CSS3布局实现多栏布局&盒布局&弹性盒布局&calc的方法？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联是一家专业提供顺庆企业网站建设,专注与网站建设、做网站、html5、小程序制作等业务。10年已为顺庆众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

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：1px solid red；
-moz-column-rule：1px solid red；
-webkit-column-rule：1px solid red；

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：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布局实现多栏布局&盒布局&弹性盒布局&calc的方法的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！