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

相关阅读:
[附源码]java毕业设计医学季节性疾病筛查系统
Maven基础篇7
插件机工作台设计（Solidworks）
Java每日笔试题错题分析（7）
计算机网络基础
（STM32H5系列）STM32H573RIT6、STM32H573RIV6、STM32H573ZIT6嵌入式微控制器基于Cortex®-M33内核
[附源码]计算机毕业设计网约车智能接单规划小程序Springboot程序
一步步带你用react+spring boot搭建后台之二(登录与首页篇)
Zookeeper 怎么实现分布式锁
计算机考研408高分复习规划-如何复习408才能得高分

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