flex布局实现色子

最新推荐文章于 2024-04-09 12:00:03 发布

辣姐什么鬼

最新推荐文章于 2024-04-09 12:00:03 发布

阅读量4.2k

点赞数 1

分类专栏： web前端文章标签： web前端 flex 布局

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

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>