flex布局打印对联-CSDN博客

本文链接：https://blog.csdn.net/m0_37630138/article/details/147741541

一、flex布局相关知识

参照博客：
https://blog.csdn.net/niezhilang/article/details/119181163

二、使用flex布局打印对联

可以修改对联字数、内容和横批。完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学习flex</title>
    <style>
        /**
        display: flex;//定义一个 Flex 容器，弹性盒子
        flex-direction:
        row （默认）从左到右
        row-reverse 从右到左
        column 从上到下
        column-reverse	从下到上
        flex-wrap:
        nowrap (默认，不换行)
        wrap（换行）
        wrap-reverse（反向换行）
        flex-flow:  flex-direction 与 flex-wrap 的缩写形式。
        justify-content: //flex项目在主轴上的对齐方式。
        flex-start（默认，左对齐）
        flex-end（右对齐）
        center（居中）
        space-between (中间有空隙，两边没有)
        space-around (中间两边都有空隙)
         */
        #title {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
            font-family: LISU;
            background: #f33;
            height: 100px;
            width: 400px;
            margin-top: 10px;
        }
        #container {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: flex-start;
            font-family: LISU;
            background: #f33;
            height:700px;
            width: 200px;
            margin-top: 10px;
        }
        .word{
            height: 100px;
            width: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 50px;
            color: black;
        }
        .line{
            border-right: 1px dashed white;
        }
    </style>
</head>
<body>
<div id="title"></div>
<div id="container"></div>
</body>
<script>
    //七字
    var count=15;
    //上下联内容
    var p ="该吃吃，该喝喝，有事别往心里搁"
        +"泡着澡，看着表，舒服一秒是一秒";
    //横批
    var t ="不能生气";
    var contentHTML="";
    for(var i=0;i<p.length;i++){
        contentHTML+="<div class='word line'>"+p.charAt(i)+"</div>";
    }
    document.getElementById("container").innerHTML = contentHTML;
    var titleHTML="";
    for(var i=0;i<t.length;i++){
        titleHTML+="<div class='word'>"+t.charAt(i)+"</div>";
    }
    document.getElementById("title").innerHTML = titleHTML;
    let c = document.getElementById('container');
    c.style.height = count*100+'px';
</script>
</html>