flex实现三点骰子

flex布局实现三点骰子

在这里插入图片描述

code如下：

<body>
    <div class="container">
        <div class="item">div>
        <div class="item">div>
        <div class="item">div>
    div>
    <style>
        .container {
            display: flex;
            flex-direction: column; /* 设置主轴方向为纵向 */
            justify-content: space-between;  /* 设置三点间隔距离相等 */
            width: 100px;
            height: 100px;
            background-color: rgb(219, 233, 233);
        }
        .item {
            width: 20px;
            height: 20px;
            background-color: aqua;
            border-radius: 50%;
        }
        .item:nth-child(1) {
            align-self: flex-start;
        }
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }
    style>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

相关阅读:
漂亮的bootstrap后台模板
Spring如何保证线程安全
Spirng MVC——获取参数详解
单/多文本溢出省略
python类中的下划线
前端ES6相关的面试题
网络安全—小白自学笔记
【408数据结构与算法】—栈和队列的案例引入（九）
java实现课程表 II
React-hooks

原文地址：https://blog.csdn.net/m0_51126511/article/details/127130938