css流式布局的介绍

说明

1、流式布局使用非固定像素来定义网页内容，即百分比布局。

2、通过将盒子的宽度设置为百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

分类

左侧固定,右侧自适应

右侧固定左侧自适应

两侧固定,中间自适应(圣杯布局)

等分布局

实例

.masonry{
-moz-column-count:3;/*火狐*/
-webkit-column-count:3;/*Safari和谷歌*/
column-count:3;
-moz-column-gap:1em;
-webkit-column-gap:1em;
column-gap:1em;
width:80%;
margin:1emauto;
}
.item{
padding:1em;
margin-bottom:1em;
-moz-page-break-inside:avoid;
-webkit-column-break-inside:avoid;
break-inside:avoid;
background:#b5ffa1;
}

//适应屏幕
@mediascreenand(max-width:800px){
.masonry{
column-count:2;//twocolumnsonlargerphones
}
}
@mediascreenand(max-width:500px){
.masonry{
column-count:1;//twocolumnsonlargerphones
}
}

以上就是css流式布局的介绍，希望对大家有所帮助。更多css学习指路：css教程