Flex布局-骰子demo

最新推荐文章于 2022-10-20 19:11:13 发布

Rainy_X

最新推荐文章于 2022-10-20 19:11:13 发布

阅读量509

点赞数 2

分类专栏： web

web 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

最近学习了Flex布局，

以下是阮一峰老师关于Flex的博客。在此感谢他让我get一项新技能！

Flex语法篇： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

1、色子数：1

思路：让圆点（即子元素）在横轴上居中在竖轴上居中，分别用justify-content和align-items

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 200px;
            height: 200px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        .main >div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
</div>
</body>
</html>

2、色子数：2

思路：竖列布局且在主轴方向采用justify-content的两端对齐布局，这样两个圆点会在左边呈现，然后采用align-items让其居中

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 200px;
            height: 200px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items:center;
        }
        .main >div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

3、色子数：3

思路：用到align-self属性让第二个和第三个圆点有自己的属性设置，分别在纵轴方向上居中和低端对齐

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
        }
        .main >div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
        .item:nth-child(2){
            align-self:center;
        }
        .item:nth-child(3){
            align-self:flex-end;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

4、色子数：4

思路：先竖着放两行圆点，每行圆点里横着放两个圆点，所以最外层父元素设置align，里面的父元素设置justify-content

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            flex-wrap:wrap;
            align-content:space-between;
        }
        .column >div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
        .column{
            flex-basis:100%;
            display:flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="main">
    <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>

5、色子数：5

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            flex-wrap:wrap;
            align-content:space-between;
        }
        .column > div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
        .column{
            flex-basis:100%;
            display:flex;
            justify-content: space-between;
        }
        .column:nth-child(2){
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="main">
    <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>
</body>
</html>

6、色子数：6

思路：跟四点的一样，先竖放三行在每行横放两个圆点

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 15px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            align-content:space-between;
            flex-wrap:wrap;
        }
        .column > div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
        .column{
            flex-basis:100%;
            display:flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="main">
    <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>

欢迎借鉴(#^.^#)：https://github.com/RainyXY/dice.git

Rainy_X

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Flex布局-骰子demo

最近学习了Flex布局，以下是阮一峰老师关于Flex的博客。在此感谢他让我get一项新技能！Flex语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlex实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html1、色子数：1思路：让圆点（即子元素）在横轴上...
复制链接

扫一扫