美文网首页
flex骰子布局

flex骰子布局

作者: 沈念一 | 来源:发表于2020-11-09 22:21 被阅读0次
image.png

用的是uniapp进行的开发，样式统一整理在最后

1

image.png 
<view class="box circle1">
    <view class="pip"></view>
</view>

2

image.png 
<view class="box circle2">
    <view class="pip"></view>
    <view class="pip"></view>
</view>

3

image.png 
<view class="box circle3">
            <view class="pip"></view>
            <view class="pip"></view>
            <view class="pip"></view>
        </view>

4

image.png 
<view class="box circle4">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>

5

image.png 
<view class="box circle5">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>

6

image.png 
<view class="box circle6">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view> 

<view class="box circle6">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>

7

image.png 
<view class="box circle7">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>

8

image.png 
<view class="box circle8">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>

9

image.png 
<view class="box circle9">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>

代码统一整理如下
<template>
    <view class="content">
        <!-- 1 -->
        <view class="box circle1">
            <view class="pip"></view>
        </view>
        
        <!-- 2 -->
        <view class="box circle2">
            <view class="pip"></view>
            <view class="pip"></view>
        </view>
        
        <!-- 3 -->
        <view class="box circle3">
            <view class="pip"></view>
            <view class="pip"></view>
            <view class="pip"></view>
        </view>
        
        <!-- 4 -->
        <view class="box circle4">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>
        
        <!-- 5 -->
        <view class="box circle5">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>
        
        <!-- 6 -->
        <!-- <view class="box circle6">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view> -->
        <view class="box circle6">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>
        
        <!-- 7 -->
        <view class="box circle7">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>
        
        
        <!-- 8 -->
        <view class="box circle8">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>
        
        
        <!-- 9 -->
        <view class="box circle9">
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
            <view class="pip1">
                <view class="pip"></view>
                <view class="pip"></view>
                <view class="pip"></view>
            </view>
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
            
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style lang="scss">
    page{
        height: 100%;
    }
    .content{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .box{
            width: 250rpx;
            height: 250rpx;
            background-color: #F0AD4E;
            border-radius: 10%;
            padding: 10px;
            box-sizing: border-box;
            .pip{
                width: 50rpx;
                height: 50rpx;
                border-radius: 50%;
                background-color: #FFFFFF;
            }
            &.circle1{
                display: flex;
                // justify-content: center;
                // justify-content: flex-end;
                // align-items: center;
            }
            &.circle2{
                display: flex;
                justify-content: space-between;
                // align-items: center;
                .pip:nth-child(2){
                    align-self: flex-end;
                }
            }
            &.circle3{
                display: flex;
                justify-content: space-between;
                .pip:nth-child(2){
                    align-self: center;
                }
                .pip:nth-child(3){
                    align-self: flex-end;
                }
            }
            &.circle4{
                display: flex;
                justify-content: space-between;
                .pip1{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
            &.circle5{
                display: flex;
                justify-content: space-between;
                .pip1{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .pip1:nth-child(2){
                    align-self: center;
                }
            }
            // &.circle6{
            //  display: flex;
            //  flex-direction: column;
            //  justify-content: space-between;
            //  .pip1{
            //      display: flex;
            //      justify-content: space-between;
            //  }
            // }
            &.circle6{
                display: flex;
                justify-content: space-between;
                .pip1{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
            &.circle7{
                display: flex;
                justify-content: space-between;
                .pip1{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .pip1:nth-child(2){
                    // justify-content: center;
                    align-self: center;
                }
            }
            &.circle8{
                display: flex;
                justify-content: space-between;
                .pip1{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
            &.circle9{
                display: flex;
                justify-content: space-between;
                .pip1{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
        }
    }
</style>

相关文章

  • flex布局实现骰子六个面的写法

    1.flex实现骰子六个面之<布局一> 2.flex实现骰子六个面之<布局二> 3.flex实现骰子六个面之<布局...

  • Flex 布局教程：实例篇

    今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 一、骰子的布局骰子的一...

  • flex布局实现骰子

    学习flex布局后的实例布局--骰子具体实现原理可参考阮一峰的Flex 布局教程：实例篇和博客flex布局实现色子...

  • CSS-Flex 布局教程：实例篇

    参考文章：Flex 布局教程：实例篇 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何...

  • 2019年9月前端面试汇总

    1. flex实现骰子5点布局（答案不唯一） 简单的思路：1.flex布局横向排列，flex-flow:wrap ...

  • flex骰子布局

    用的是uniapp进行的开发，样式统一整理在最后 1 2 3 4 5 6 7 8 9

  • CSS布局

    1、CSS Grid 网格布局教程 2、Flex 布局教程：语法篇（骰子布局，网格布局，百分百布局，圣杯布局......

  • Flex布局实例-骰子布局

    1、 单项目 首先，只有左上角有1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够啦。 设置项目的对齐...

  • 骰子布局Flex写法

    骰子布局1-6 html模板：把骰子面板当成一个容器，骰子中的每个点相当于每个项。 ①一个点 html： css：...

  • Flex实例

    一、骰子布局 单项目分别对骰子的1~9个点进行通过代码来实现首先对单一点就行布局。首先以为flex布局具有自身的默...

网友评论

      本文标题：flex骰子布局

      本文链接：https://www.haomeiwen.com/subject/dewrbktx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|flex骰子布局|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！