当前位置：首页 > news >正文

flex布局打印对联

news 来源：原创 2025/5/7 8:31:50

一、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>