Flex筛子

最新推荐文章于 2024-10-17 15:53:46 发布
最新推荐文章于 2024-10-17 15:53:46 发布
阅读量83 收藏
点赞数
分类专栏： web开发 CSS HTML 文章标签： flex html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdndas/article/details/117340634
版权
CSS 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏
web开发
2 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0; }
        .wrap{  display: flex; }
        .container{
            border: 2px solid red;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            margin: 25px;
            box-shadow: 3px 3px 3px 0px #999;

            display: flex;
        }
        .item{
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: aqua;
            box-shadow: 1px 1px 2px 0px blue;
        }
        /* 一点 */
        .one{
            justify-content: center;
            align-items: center;
        }
        /* 二点 */
        /* .two{
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        } */

        .two{
            justify-content: space-around;
            align-items: center;
        }
        .three{
            justify-content: space-around;
            align-items: center;
        }
        .three div:first-child{
            align-self: flex-start;
        }
        .three div:last-child{
            align-self: flex-end;
        }

        /* 四点 */
        .four div{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        .five div{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        .six div{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        .seven div{
            display: flex; 
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        .eight div{
            display: flex; 
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        .nine div{
            display: flex; 
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        .ten div{
            display: flex; 
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
    </style>
    <!-- 百度搜索 flex布局 色子案例 -->
    <!-- 剩下时间：好好把flex布局总结一下，把色子案例写一上，写到10点 -->
</head>
<body>
    <div class="wrap">
        <!-- 一点 -->
        <div class="container one">
            <div class="item"></div>
        </div>
        <!-- 二点 -->
        <div class="container two">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <!-- 三点 -->
        <div class="container three">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <!-- 四点 -->
        <div class="container four">
            <div>
                <div class="item four_first"></div>
                <div class="item four_second"></div>
            </div>
            <div>
                <div class="item four_three"></div>
                <div class="item four_four"></div>
            </div>
        </div>
        <!-- 五点 -->
        <div class="container five">
            <div>
                <div class="item five_first"></div>
                <div class="item five_second"></div>
            </div>
            <div>
                <div class="item five-third"></div>
            </div>
               
            <div>
                <div class="item five_forth"></div>
                <div class="item five_fifth"></div>
            </div>
        </div>
        <!-- 六点 -->
        <div class="container six">
            <div>
                <div class="item six_first"></div>
                <div class="item six_second"></div>
                <div class="item six-third"></div>
            </div>
            <div>
                <div class="item six-forth"></div>
                <div class="item six_fifth"></div>
                <div class="item six_sixth"></div>
            </div>
        </div>
        <!-- 七点 -->
        <div class="container seven">
            <div>
                <div class="item seven_first"></div>
                <div class="item seven_second"></div>
                <div class="item seven-third"></div>
            </div>
            <div>
                <div class="item seven-forth"></div>
            </div>
            <div>
                <div class="item seven_fifth"></div>
                <div class="item seven_sixth"></div>
                <div class="item seven_seventh"></div>
            </div>
        </div>
        <!-- 八点 -->
        <div class="container eight">
            <div>
                <div class="item eight_first"></div>
                <div class="item eight_second"></div>
                <div class="item eight-third"></div>
                <div class="item eight-forth"></div>
            </div>    
            <div>
                <div class="item eight_fifth"></div>
                <div class="item eight_sixth"></div>
                <div class="item eight_seventh"></div>
                <div class="item eight_seighth"></div>
            </div>    
        </div>
        <!-- 九点 -->
        <div class="container nine">
            <div>
                <div class="item nine_first"></div>
                <div class="item nine_second"></div>
                <div class="item nine_third"></div>
                <div class="item nine_forth"></div>
            </div>    
            <div>
                <div class="item nine_ninth"></div>
            </div>
            <div>
                <div class="item nine_fifth"></div>
                <div class="item nine_sixth"></div>
                <div class="item nine_seventh"></div>
                <div class="item nine_seighth"></div>
            </div>    
        </div>
        <!-- 十点 -->
        <div class="container ten">
            <div>
                <div class="item ten_first"></div>
                <div class="item ten_second"></div>
                <div class="item ten_third"></div>
                <div class="item ten_forth"></div>
            </div>    
            <div>
                <div class="item ten_ninth"></div>
                <div class="item ten_tenth"></div>
            </div>
            <div>
                <div class="item ten_fifth"></div>
                <div class="item ten_sixth"></div>
                <div class="item ten_seventh"></div>
                <div class="item ten_seighth"></div>
            </div>    
        </div>
    </div>
</body>
</html>

 

什么也不会却想做前端
关注
专栏目录
flex制作筛子
hhhhs2的博客
05-07 163
1点 wrap是ul上面的属性 <div class="box"> <ul class="wrap"> <li>1点</li> </ul> </ul> </div> ul>li { display: block; width: 100px; height: 10
flex布局(骰子布局)
weixin_54420874的博客
02-23 2218
1、应该都知道使用VS来敲写页面的第一步就是新建文件夹，(也可以建文件夹：这是指只有html没有css与js才可以的)。然后，可以在VS中打开文件夹，也可以直接把文件夹拖进去(这有两种方法，任意一种就行了、建议你直接拖进去，因为方便)。 2、这次的页面是一个骰子布局(也叫flex布局)，大家应该都知道骰子是什么，就有六个面一个面对应一个数字，但面是一样的，只是上边的圆点不相同。也就是从一到六，“一”就一个圆点，“二”就两个圆点。以此类推。这次我们就只敲一个面，就是“二”那一面。 3、这就是进来后的效果了
flex布局实现筛子点数以及对于flex布局的思考
忙着开花儿
03-23 1026
之前在一次面试中被问道flex布局较普遍CSS布局的优点在什么地方，就个人经历而言，flex布局比普通CSS布局简便很多，比如我们要进行一个简单的一行四个li的无序列表的排列，要求相邻li元素间隔自适应，首尾元素要与ul容器没有间隙，效果图如下：普通CSS布局为：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta...
利用flex制作筛子
冰雪为融的博客
04-22 623
如果对flex布局不了解的或是有疑问的请点击https://blog.csdn.net/lhjuejiang/article/details/80019673核心代码：display:flex; flex-direction:column; align-items:center; justify-content:center; justify-content:space-around;displa...
flex布局实战——骰子案例
delong1998的博客
03-02 1118
flex布局实战——筛子案例 下面将用flex布局来以次生成各个筛子。 初始化页面 css代码： <style> .main { width: 200px; height: 200px; border: #999999 solid 1px; } .box { width: 30%;
flex 布局骰子
马金波
06-09 258
dice.scss .main { width: 100%; height: 100%; display: flex; -webkit-display: flex; flex-direction: row; justify-content: space-around; align-items: center; // justify-content: center; vertical-align: center; flex-wra
Flex布局--骰子布局
m0_63318949的博客
03-10 2549
flex实现骰子布局
flex布局小案例——制作骰子
super码力的博客
11-08 4946
制作点数一到六的骰子，看了这篇还不会制作骰子，欢迎私信！制作骰子首先需要学会flex的基础原理
flex布局实现骰子的6种布局
叶小桃的博客
06-13 1731
思路：首先是纵向布局flex-direction: column，并且主轴方向将其两端对齐justify-content: space-between（也就是上下靠边），然后将第二个子元素居中对齐align-self: center，第三个子元素靠后对齐align-self: end。整个页面分为6骰子的面，分别为点数1到6。点数1：典型的居中布局。
Flex布局实现筛子3
LiuHu
07-03 479
火花就在一瞬间，抓住它，温故而知新…… 6.用 flex 实现下图效果。容器宽高不定，子元素宽高固定？ 刚看一眼以为很简单，但是……因为不能够设置父级盒子的高度并且没有想到设置主轴的方向，所以总是撑不开父级元素，总是在一行显示 父级 沿着主轴的排列方式 是否换行 简写形式 存在剩余空间时候子项目的排列方式 我觉得这张图描述的就非常生动 项目的 特殊/省略写法 flex: flex-grow flex-shrink flex-basic; 第三个如果是auto的话设置的width就有效 如果不是aut
利用Flex弹性布局实现与现实骰子五点
weixin_44550209的博客
03-31 1462
作者：李国林 可能对于很多初学者在学习网页的布局上常常想要搞出一些与其他人不一样的布局，但有的时候，总是做不出自己的风格，就像梦想很美好，现实很残酷那样，所以今天，我发的这个是与以前的传统布局相比，flex布局可能对您有点好处，当然有一些人用惯了传统的布局方式，那也看你的喜欢。PS：之所以用这个标题是因为我用了以下的flex弹性布局做了个骰子。 开发工具：DW 代码：源代码： ...
html利用flex布局制作筛子
07-27
您可以使用Flex布局来制作一个筛子的HTML页面。下面是一个简单的示例： ...<!... .container { ...这样，您就可以使用Flex布局制作一个简单的筛子。您可以根据需要进行调整和美化。希望对您有所帮助！
Html乘法
xige1995的博客
10-14 287
【代码】Html乘法。
Html/Vue浏览器下载并重命名文件
NAN0808的博客
10-17 117
【代码】Html/Vue浏览器下载并重命名文件。
使用HTML、CSS和JavaScript创建图像缩放功能
2301_79858914的博客
10-13 438
通过以上步骤，我们成功创建了一个简单的图像缩放功能。用户只需点击图像，就能查看更大的版本，提升了网站的互动性和用户体验。希望你能在自己的项目中实现这个功能，欢迎分享你的经验和想法！你可以根据需要进一步修改或添加细节。
【写个本地的html】写个本地的html文件，做个demo，直接用浏览器打开
weixin_41747256的博客
10-10 465
【写个本地的html】写个本地的html文件，做个demo，直接用浏览器打开
奇怪的一级目录变二级目录 - django app中的urls.py与html中的href语法
ToBeAMensch
10-14 203
最近水鱼又在整活写路径配置。过程中遇到，比如分别有，http://localhost/index，http://localhost/about这2个网站底下的一级目录。结果自己配置出来的链接，如果点完index，再点about，就会出现奇葩的http://localhost/index/about。为此水鱼动用了7秒就要flush的大脑研究了下发现，如果改成 href="index/"，href="about/"就会出现这个外行会比较懵的错误。
如何将 ECharts 图表插入 HTML Canvas
最新发布
exlink2012的专栏
10-17 219
通过这种方法，我们成功地将 ECharts 生成的图表插入到了 HTML Canvas 中的指定位置。这为我们提供了更大的灵活性，允许我们在 Canvas 中组合多种元素，包括 ECharts 图表。在 Canvas 中添加多个 ECharts 图表在图表周围绘制额外的图形或文本将整个 Canvas 导出为图片。
Chromium HTML attribute与c++接口对应关系分析
杰克东的专栏
10-11 499
访问 W3School
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值