flex布局实现色子

news/2024/5/19 19:54:28 标签: web前端, flex, 布局

1、色子数：1

思路：让圆点（即子元素）在横轴上居中在竖轴上居中，分别用justify-content和align-items

实现代码：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 200px;
            height: 200px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        .main >div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
</div>
</body>
</html>

2、色子数：2

 

思路：竖列布局且在主轴方向采用justify-content的两端对齐布局，这样两个圆点会在左边呈现，然后采用align-items让其居中

实现代码：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 200px;
            height: 200px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items:center;
        }
        .main >div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

3、色子数：3

 

思路：用到align-self属性让第二个和第三个圆点有自己的属性设置，分别在纵轴方向上居中和低端对齐

实现代码：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
        }
        .main >div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
        .item:nth-child(2){
            align-self:center;
        }
        .item:nth-child(3){
            align-self:flex-end;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

4、色子数：4

 

思路：先竖着放两行圆点，每行圆点里横着放两个圆点，所以最外层父元素设置align，里面的父元素设置justify-content

实现代码：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            flex-wrap:wrap;
            align-content:space-between;
        }
        .column >div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
        .column{
            flex-basis:100%;
            display:flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
</body>
</html>

5、色子数：5

 

实现代码：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            flex-wrap:wrap;
            align-content:space-between;
        }
        .column > div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
        .column{
            flex-basis:100%;
            display:flex;
            justify-content: space-between;
        }
        .column:nth-child(2){
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
    <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
</body>
</html>

6、色子数：6

 

思路：跟四点的一样，先竖放三行在每行横放两个圆点

实现代码：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        .main {
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 20px;
            margin: 100px auto;
            padding: 15px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            align-content:space-between;
            flex-wrap:wrap;
        }
        .column > div{
            width:40px;
            height:40px;
            background:#000;
            border-radius:40px;
        }
        .column{
            flex-basis:100%;
            display:flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>

</div>
</body>
</html>

 

 

 


http://www.niftyadmin.cn/n/1368279.html

相关文章

解决IE不支持display:inline-block;

解决IE不支持display:inline-block;

对于IE不支持display:inline-block;的解决方法 .triangle-left{height:0px;width:0px;border:30px solid #000;border-color:transparent #ebebeb transparent transparent;display:inline-block;*display:inline;zoom:1;_height:250px;margin-left:-20px;position:relative;to…
阅读更多...
解决ie兼容颜色rgba格式

解决ie兼容颜色rgba格式

background-color:rgba(0,0,0,0.5); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#7F000000,endColorstr#7F000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#7F000000,endColorstr#7F000000);以上代码&#xff0c;我们想…
阅读更多...
微信小程序之tab切换效果

微信小程序之tab切换效果

微信小程序之tab切换效果&#xff0c;如图&#xff1a; 最近在学习微信小程序并把之前的公司app搬到小程序上&#xff0c;挑一些实现效果记录一下&#xff08;主要是官方文档里没说的&#xff0c;毕竟官方文档只是介绍功能&#xff09; .wxml代码&#xff1a; <view class…
阅读更多...
微信小程序之二三级菜单（navigateTo传递数据的应用）

微信小程序之二三级菜单（navigateTo传递数据的应用）

今早来之后稍微写了下今天的工作目标然后就是自己犯蠢到现在的过程&#xff0c;所幸最后还是走回了正轨&#xff0c;记录一下我在过程中的内心弹幕&#xff0c;并把最后结果记录一下 微信小程序-估价系统-车辆品牌款式等-三级菜单 车标 省份-城市-二级菜单 &#xff08;二三级…
阅读更多...
JavaScript实现tab标签-解决循环bug问题

JavaScript实现tab标签-解决循环bug问题

用JavaScript实现tab标签当我们用循环实现每个tab标签点击效果的时候会发现循环bug&#xff0c;每个i输出都是循环的最终结果而不是每一个循环中的数值 解决方法有两个 第一种方法是给DOM节点添加_index属性&#xff0c;属性值等于索引i 简单代码如下&#xff1a; <!DOCT…
阅读更多...
雅虎WEB前端网站优化

雅虎WEB前端网站优化

雅虎给出了优化网站加载速度的34条法则&#xff08;包括Yslow规则22条&#xff09; 详细说明&#xff0c;下载转发 ponytail 的译文&#xff08;来自帕兰映像&#xff09;。 1.Minimize HTTP Requests 减少HTTP请求 图片、css、script、flash等等这些都会增加http请求数&#x…
阅读更多...
前端-搜索引擎优化-《谷歌搜索引擎优化初学者指南》总结

前端-搜索引擎优化-《谷歌搜索引擎优化初学者指南》总结

1、通过标题标签标明页面的标题 标题标签告诉用户和搜索引擎一个特定的网页主题是什么 title标签理想情况下应该为每一个网页创建唯一的页面标题 网站首页的标题可以列出网站或者公司名称和其他一些重要的信息&#xff0c;诸如公司的实际地址&#xff0c;一些主要关注的领驭…
阅读更多...
background属性总结

background属性总结

对background的属性做了一个总结&#xff0c;以后会慢慢补充&#xff0c;暂时是写了个html来展示总结内容&#xff0c;可以直接把代码复制打开看 效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset&q…
阅读更多...
最新文章

Copyright @ 2022~2023