纯css写砌体排版样式_css 砌式-CSDN博客

本文链接：https://blog.csdn.net/qq_45358768/article/details/130298068

该文章演示了一个使用CSS实现的砌体式排版样式，通过设置.container的columns属性实现多列布局，box内元素避免截断，展示了不同轴线对齐方式的效果，如flex-end、center、space-between和space-around。

摘要由CSDN通过智能技术生成

纯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: #333;
}
.container{
    width: 1200px;
    margin: 20px auto;
    columns: 3;
    column-gap: 40px;
}
.container .box{
    width: 100%;
    margin: 0 0 20px;
    padding: 10px;
    background: #fff;
    overflow: hidden;
    break-inside: avoid;//避免截断
}

效果展示图