纯css写砌体排版样式
demo.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="container">
<div class="box">
<img src="public/hudie.jpg" alt="" width="100%">
<h2>hello wangyan1</h2>
<p>flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
————————————————
版权声明:本文为CSDN博主「莪假裝堅強」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
</p>
</div>
<div class="box">
<img src="public/hudie.jpg" alt="" width="100%">
<h2>hello wangyan2</h2>
<p>flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
————————————————
版权声明:本文为CSDN博主「莪假裝堅強」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_47994845/article/details/123446517</p>
</div>
<div class="box">
<img src="public/hudie.jpg" alt="" width="100%">
<h2>hello wangyan3</h2>
<p>flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
</p>
</div>
<div class="box">
<img src="public/hudie.jpg" alt="" width="100%">
<h2>hello wangyan4</h2>
<p>flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
</p>
</div>
<div class="box">
<img src="public/hudie.jpg" alt="" width="100%">
<h2>hello wangyan5</h2>
<p>flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
</p>
</div>
<div class="box">
<img src="public/hudie.jpg" alt="" width="100%">
<h2>hello wangyan6</h2>
<p>flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
</p>
</div>
<div class="box">
<img src="public/hudie.jpg" alt="" width="100%">
<h2>hello wangyan7</h2>
<p>flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
</p>
</div>
</div>
</body>
</html>
demo.css文件
body {
margin: 0;
padding: 0;
background:
}
.container{
width: 1200px;
margin: 20px auto;
columns: 3;
column-gap: 40px;
}
.container .box{
width: 100%;
margin: 0 0 20px;
padding: 10px;
background:
overflow: hidden;
break-inside: avoid;//避免截断
}
![效果展示图](https://i-blog.csdnimg.cn/blog_migrate/d016f54c18870b65353d2c3950d39cf0.png)