用flex布局画骰子的六个面

最新推荐文章于 2023-06-13 20:28:31 发布

yikina_tiyoko

最新推荐文章于 2023-06-13 20:28:31 发布

阅读量447

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/yikina_tiyoko/article/details/129885124

版权

1

直接暴力主轴侧轴垂直居中就好,为更直观的体现效果，以下代码忽略了样式写法，参考flex部分即可

  .box {
            display:flex;
            justify-content: center;
            align-items:center;
            
        }

2

将主轴（横轴）改为平分，横向上保持骰子间距，侧轴center居中，纵向上确定距离

.box {
            display:flex;
            justify-content: space-around;
            align-items:center;} ```

3

主轴先设置space-between贴近两边，侧轴依此为子元素设置

 .box {
           display:flex;
           justify-content: space-between;
           align-items:flex-start;
           
       }
       .item {       
       }
       .item:nth-child(2) {
           align-self: center;
       } 
       .item:nth-child(3) {
           align-self:flex-end
           }

4 or 6

两者实现方式一致，每行item数量修改即可

 .box {
            display: flex;
            justify-content:space-between;
        }
        .column {
     display:flex;
     flex-direction:column;
     justify-content:space-between;
    }

    </style>
</head>

<body>
    <div class="box">
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
    </div>
</body>

</html>

5

 .box {
            display: flex;
            justify-content: space-between;

        }

        .column {
      display:flex;
      flex-direction:column;
      justify-content: space-between;
    }

        .column:nth-child(2) {//让中间的点居中
            justify-content: center;
        } 
    </style>
</head>

<body>
    <div class="box">
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="column">
            <span class="item"></span>
        </div>
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
        
    </div>
</body>

</html>

yikina_tiyoko

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用flex布局画骰子的六个面

直接暴力主轴侧轴垂直居中就好,为更直观的体现效果，以下代码忽略了样式写法，参考flex部分即可。将主轴（横轴）改为平分，横向上保持骰子间距，侧轴center居中，纵向上确定距离。主轴先设置space-between贴近两边，侧轴依此为子元素设置。两者实现方式一致，每行item数量修改即可。
复制链接

扫一扫