请选择 进入手机版 | 继续访问电脑版
网络

教育改变生活

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 718|回复: 0

【HTML5:第十章 CSS布局:弹性盒子布局】典型案例-骰子

[复制链接]

232

主题

233

帖子

1010

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1010
发表于 2022-1-12 11:01:26 | 显示全部楼层 |阅读模式
本帖最后由 却尘 于 2022-1-12 11:04 编辑

<!DOCTYPE html>
<html>
        <head>
                <meta  charset="tf-8" />
                <title>骰子</title>
                <style type="text/css">
                        body{
                                display: flex;
                                flex-flow: wrap;
                        }
                        .item{
                                background-color: #000;
                                border-radius: 50%;
                                width: 20px;
                                height: 20px;
                        }
                        .flex {
                          padding: 5px;
                          margin: 10px;
                          display: flex;
                          width: 100px;
                          height: 100px;
                          border: 1px solid #000;
                          border-radius: 5px;
                        }
                        .flex-1 {
                          justify-content: center;
                          align-items: center;
                        }
                        .flex-2 {
                          flex-direction: column;
                          justify-content: space-around;
                          align-items: center;
                        }
                        .flex-3 {
                          justify-content: space-around;
                        }
                        .flex-3 .item:nth-of-type(2){
                          align-self: center;
                        }
                        .flex-3 .item:nth-of-type(3){
                          align-self:flex-end;
                        }
                        .flex-4 {
                          flex-wrap: wrap;
                          align-content: space-between;
                        }
                        .flex-4 .column{
                          display: flex;
                          flex-basis: 100%;
                          justify-content: space-between;
                        }
                        .flex-5 {
                          flex-wrap: wrap;
                          align-content: space-between;
                        }
                        .flex-5 .column{
                                display: flex;
                                flex-basis: 100%;
                                justify-content: space-between;
                        }
                        .flex-5 .column:nth-of-type(2){
                                justify-content: center;
                        }
                        .flex-6 {
                          flex-wrap: wrap;
                          align-content: space-around;
                        }
                        .flex-6 .column{
                                display: flex;
                                flex-basis: 100%;
                                justify-content: space-around;
                        }
                </style>
        </head>
<body>
        <div class="flex flex-1">
          <div class="item"></div>
        </div>
        <div class="flex flex-2">
          <div class="item"></div>
          <div class="item"></div>
        </div>
        <div class="flex flex-3">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
        <div class="flex flex-4">
                <div class="column">
                        <div class="item"></div>
                        <div class="item"></div>
                </div>
                <div class="column">
                        <div class="item"></div>
                        <div class="item"></div>
                </div>
        </div>
        <div class="flex flex-5">
                <div class="column">
                        <div class="item"></div>
                        <div class="item"></div>
                </div>
                <div class="column">
                        <div class="item"></div>
                </div>
                <div class="column">
                        <div class="item"></div>
                        <div class="item"></div>
                </div>
        </div>
        <div class="flex flex-6">
                <div class="column">
                        <div class="item"></div>
                        <div class="item"></div>
                </div>
                <div class="column">
                        <div class="item"></div>
                        <div class="item"></div>
                </div>
                <div class="column">
                        <div class="item"></div>
                        <div class="item"></div>
                </div>
        </div>
</body>
</html>

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

WEB前端

QQ|手机版|小黑屋|金桨网|助学堂  咨询请联系站长。

GMT+8, 2023-2-4 19:36 , Processed in 0.160211 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表