flex详解以及利用flex进行骰子布局

望屿

已于 2022-04-18 15:27:17 修改

阅读量1.1k

点赞数 1

分类专栏：前端源码学习和手撕文章标签： css css3 html

于 2022-01-22 23:22:22 首次发布

本文链接：https://blog.csdn.net/darabiuz/article/details/122645692

版权

1.flex内容详解

请移步致张鑫旭大牛的博客：flex布局

重点是要明白

flex布局由容器和子项构成
作用在容器和子项上分别有不同的属性，了解每个属性的含义

2.利用flex布局实现骰子效果

效果图如下：

附上源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }

        .item {
   
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin: 4px;

            background-color: #333;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
        }

        .box {
   
            margin: 16px;
            padding: 4px;
            width: 104px;
            height: 104px;
            object-fit: contain;
            background-color: #e7e7e7;
            border-radius: 10px;
            box-shadow:
                inset 0 5px white,
                inset 0 -5px #bbb,
                inset 5px 0 #d7d7d7,
                inset -5px 0 #d7d7d7;
        }

        h3 {
   
            margin-left: 20px;
        }

        .onepic {
   
            width: 1500px;
            flex-wrap: wrap;
            display: flex
        }

        .box2 {
   
            display: flex;
            justify-content: center;
        }

        .box3 {
   
            display: flex;
            justify-content: flex-end;
        }

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

        .box5 {
   
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }

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

最低0.47元/天解锁文章

望屿

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
flex详解以及利用flex进行骰子布局

1.flex内容详解请移步致张鑫旭大牛的博客：flex布局重点是要明白flex布局由容器和子项构成作用在容器和子项上分别有不同的属性，了解每个属性的含义2.利用flex布局实现筛子效果效果图如下：附上源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
复制链接

扫一扫