flex布局实现色子

来源：互联网发布：linux hostname命令编辑：程序博客网时间：2024/05/21 11:05

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>

0 0