弹性盒布局——骰子布局

最新推荐文章于 2023-10-13 13:17:58 发布

牛奶小柒Luke

最新推荐文章于 2023-10-13 13:17:58 发布

阅读量1.2k

点赞数 2

分类专栏： web 编程 html 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_52475404/article/details/121190398

版权

本文介绍了如何使用CSS3的弹性盒布局来创建骰子布局。内容提到骰子布局的关键在于将每个骰子元素设置为独立的弹性盒，以确保它们在布局中居中且稳定。

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

弹性盒布局-骰子布局

弹性盒布局

个人认为正常的骰子应该是这样的排布的，不是太复杂，一点应该就是在正中间，不会随便挪动的吧（菜鸡发言hh）
总代码：（每个骰子分别弹性盒布局就好）

<!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>弹性盒布局_骰子布局</title>
    <style>
        div{
     
            display: flex;
        }
        .block{
     
            display: flex;
            flex-wrap: wrap;
            background-color: #000;
            width: 800px;
            justify-content: center;
            align-content: center;
            margin-left: 350px;
        }
        .box{
     
            display: flex;
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            padding: 25px;
            background: linear-gradient(#FFF 5%,grey 90%,#FFF);
            border-radius: 20px;
            margin: 25px;
        }
        .item{
     
            width: 40px;
            height: 40px;
            background: #000;
            border-radius: 50%;
        }
        .box1{
     
            justify-content: center;
            align-items: center;
        }
        .box2{
     
            justify-content: space-between;
        }
        .box2 .item:nth-child(2){
     
            align-self: flex-end;
        }
        .box3{
     
            justify-content: space-between;
        }
        .box3 .item:nth-child(2){
     
            align-self: center;
        }
        .box3 .item:nth-child(3){
     
            align-self: flex-end;
        }
        .box4,.box5{
     
            flex-wrap: wrap;
            align-content: space-between;
        }
        .box5 div.another{
     
            align-items: center;
            display: flex;
            justify-self: center;
            flex-basis: 100%;
            justify-content: center;