• CSS 用 flex 布局绘制骰子

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <title>title>
    6.     <style>
    7.       .box {
    8.         height: 100px;
    9.         width: 100px;
    10.         border: 2px solid grey;
    11.         border-radius: 10px;
    12.         display: flex;
    13.         justify-content: center; // 水平居中
    14.         /* align-items: center; */
    15.       }
    16.  
    17.       .point {
    18.         width: 20px;
    19.         height: 20px;
    20.         border-radius: 50%;
    21.         background: black;
    22.         /* align-self 写在子元素上，覆盖父元素指定的交叉轴对齐方式 */
    23.         align-self: center;
    24.       }
    25.     style>
    26.   head>
    27.   <body>
    28.     <div class="box">
    29.       <div class="point">div>
    30.     div>
    31.   body>
    32. html>

     

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <title>title>
    6.     <style>
    7.       .box {
    8.         height: 100px;
    9.         width: 100px;
    10.         border: 2px solid grey;
    11.         border-radius: 10px;
    12.         display: flex;
    13.         /* 主轴改为纵向  */
    14.         flex-direction: column;
    15.         /* 等分 */
    16.         justify-content: space-evenly;
    17.         /* 垂直居中 */
    18.         align-items: center;
    19.       }
    20.  
    21.       .point {
    22.         width: 20px;
    23.         height: 20px;
    24.         border-radius: 50%;
    25.         background: black;
    26.       }
    27.     style>
    28.   head>
    29.   <body>
    30.     <div class="box">
    31.       <div class="point">div>
    32.       <div class="point">div>
    33.     div>
    34.   body>
    35. html>

     

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <title>title>
    6.     <style>
    7.       .box {
    8.         height: 100px;
    9.         width: 100px;
    10.         border: 2px solid grey;
    11.         border-radius: 10px;
    12.         display: flex;
    13.         padding: 10px;
    14.         /* 主轴改为纵向  */
    15.         flex-direction: column;
    16.         /* 子元素间距相等*/
    17.         justify-content: space-between;
    18.       }
    19.  
    20.       .point {
    21.         width: 25px;
    22.         height: 25px;
    23.         border-radius: 50%;
    24.         background: black;
    25.       }
    26.  
    27.       .point:nth-child(2) {
    28.         /* 居中对齐 */
    29.         align-self: center;
    30.       }
    31.  
    32.       .point:nth-child(3) {
    33.         /* 终点对齐 */
    34.         align-self: flex-end;
    35.       }
    36.     style>
    37.   head>
    38.   <body>
    39.     <div class="box">
    40.       <div class="point">div>
    41.       <div class="point">div>
    42.       <div class="point">div>
    43.     div>
    44.   body>
    45. html>

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>title>
    7.     <style>
    8.       .box {
    9.         margin: 20px;
    10.         height: 100px;
    11.         width: 100px;
    12.         border: 2px solid grey;
    13.         border-radius: 10px;
    14.         padding: 10px;
    15.         box-sizing: border-box;
    16.  
    17.         display: flex;
    18.         /* 纵向 */
    19.         flex-wrap: wrap;
    20.         /* 相对均匀对齐  */
    21.         align-content: space-between;
    22.       }
    23.  
    24.       .row {
    25.         /* 空间大小 */
    26.         flex-basis: 100%;
    27.         display: flex;
    28.         justify-content: space-between
    29.       }
    30.  
    31.       .point {
    32.         border-radius: 50%;
    33.         height: 25px;
    34.         width: 25px;
    35.         background: black;
    36.       }
    37.     style>
    38.   head>
    39.   <body>
    40.     <div class="box">
    41.       <div class="row">
    42.         <div class="point">div>
    43.         <div class="point">div>
    44.       div>
    45.       <div class="row">
    46.         <div class="point">div>
    47.         <div class="point">div>
    48.       div>
    49.     div>
    50.   body>
    51. html>

     

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>title>
    7.     <style>
    8.       .box {
    9.         margin: 20px;
    10.         height: 100px;
    11.         width: 100px;
    12.         border: 2px solid grey;
    13.         border-radius: 10px;
    14.         padding: 10px;
    15.         box-sizing: border-box;
    16.  
    17.         /* 容器内元素使用flex布局 */
    18.         display: flex;
    19.         /* 将主轴改为纵向 */
    20.         flex-direction: column;
    21.         /* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */
    22.         justify-content: space-evenly;
    23.       }
    24.  
    25.       .row1 {
    26.         /* 每行内元素使用flex布局 */
    27.         display: flex;
    28.         /* 主轴（横向）相对均匀对齐 */
    29.         justify-content: space-between;
    30.       }
    31.  
    32.       .row2 {
    33.         /* 每行内元素使用flex布局 */
    34.         display: flex;
    35.         /* 主轴（横向）居中对齐 */
    36.         justify-content: center;
    37.       }
    38.  
    39.       .point {
    40.         border-radius: 50%;
    41.         height: 25px;
    42.         width: 25px;
    43.         background: black;
    44.       }
    45.     style>
    46.   head>
    47.   <body>
    48.     <div class="box">
    49.       <div class="row1">
    50.         <div class="point">div>
    51.         <div class="point">div>
    52.       div>
    53.       <div class="row2">
    54.         <div class="point">div>
    55.       div>
    56.       <div class="row1">
    57.         <div class="point">div>
    58.         <div class="point">div>
    59.       div>
    60.     div>
    61.   body>
    62. html>

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>title>
    7.     <style>
    8.       .box {
    9.         margin: 20px;
    10.         height: 100px;
    11.         width: 100px;
    12.         border: 2px solid grey;
    13.         border-radius: 10px;
    14.         padding: 10px;
    15.         box-sizing: border-box;
    16.  
    17.         /* 容器内元素使用flex布局 */
    18.         display: flex;
    19.         /* 将主轴改为纵向 */
    20.         flex-direction: column;
    21.         /* 主轴（纵向）相对均匀对齐 */
    22.         justify-content: space-between;
    23.       }
    24.  
    25.       .row {
    26.         /* 每行内元素使用flex布局 */
    27.         display: flex;
    28.         /* 主轴（横向）绝对均匀对齐 */
    29.         justify-content: space-evenly;
    30.       }
    31.  
    32.       .point {
    33.         border-radius: 50%;
    34.         height: 20px;
    35.         width: 20px;
    36.         background: black;
    37.       }
    38.     style>
    39.   head>
    40.   <body>
    41.     <div class="box">
    42.       <div class="row">
    43.         <div class="point">div>
    44.         <div class="point">div>
    45.         <div class="point">div>
    46.       div>
    47.       <div class="row">
    48.         <div class="point">div>
    49.         <div class="point">div>
    50.         <div class="point">div>
    51.       div>
    52.       <div class="row">
    53.         <div class="point">div>
    54.         <div class="point">div>
    55.         <div class="point">div>
    56.       div>
    57.     div>
    58.   body>
    59. html>

  • 相关阅读:
    JavaScript 教程---互联网文档计划
    jQuery【事件】
    Nacos从0到1（基础篇）
    计算机毕业设计（附源码）python疫情隔离便民系统
    Java语言Map中GetOrDefault方法的使用
    小程序源码：全新外卖侠cps5.6全套微信小程序源码下载-多玩法安装简单
    C#:画许多圆
    快速搭建Linux网站，并利用内网穿透实现宝塔面板的公网访问【内网穿透】
    Web前端中横线：深入探索与实际应用
    沁恒 CH32V208(四): CH32V208 网络DHCP示例代码分析
  • 原文地址：https://blog.csdn.net/m0_60559048/article/details/136587541