用flex写筛子的各个面

最新推荐文章于 2022-10-20 19:11:13 发布
最新推荐文章于 2022-10-20 19:11:13 发布
阅读量246 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TISRNW/article/details/102490184
版权

用flex写小圆圈在一个方块里怎么布局。
在这里插入图片描述
主要用到flex的
justify-content: ;
flex-wrap: ;
align-items: ;
等等挺简单的一些css

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>筛子</title>
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
			}
			
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.container {
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}
			
			.container .box {
				height: 200px;
				width: 200px;
				border: 5px solid black;
				/*flex-wrap: wrap;*/
				/*display: flex;*/
			}
			
			.container .box .one {
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				/*左右居中主轴*/
			}
			
			.container .cicle {
				height: 20px;
				width: 20px;
				border-radius: 10px;
				background-color: black;
			}
			
			.container .box .two {
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				/*转一下主轴*/
				justify-content: space-around;
				align-items: center;
			}
			
			.container .box .three {
				height: 100%;
				/*width: 100%;*/
				/*box-sizing: content-box;*/
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				border: none;
				padding: 0px 25px;
			}
			
			.container .box .four {
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			
			.container .box .four .top1 {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
			
			.container .box .four .bottom1 {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
			
			.container .box .five {
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			
			.container .box .five .top1 {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
			
			.container .box .five .bottom1 {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
			
			.container .box .five .point {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.container .box .six {
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			
			.container .box .six .top2 {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
			
			.container .box .six .bottom2 {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
			
			.container .box .seven {
				height: 100%;
				/*display: flex;*/
			}
			
			.container .box .seven .seven1 {
				height: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				padding: 0px 20px;
			}
			
			.container .box .seven .seven2 {
				height: 50%;
				display: flex;
				/*flex-direction: column;*/
				justify-content: space-between;
				
				align-items: center;
			}
			.container .box .seven .seven2 .seven3{
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				
			}
			.container .box .seven .seven2 .seven4{
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<!--第一个-->
			<div class="box">
				<div class="one">
					<div class="cicle">

					</div>
				</div>

			</div>
			<!--第二个-->
			<div class="box">
				<div class="two">
					<div class="cicle">

					</div>
					<div class="cicle">

					</div>
				</div>
			</div>
			<!--第三个-->
			<div class="box">
				<div class="three">
					<div class="cicle" style="align-self: flex-start;">

					</div>
					<div class="cicle">

					</div>
					<div class="cicle" style="align-self: flex-end;">

					</div>
				</div>
			</div>
			<!--第四个-->
			<div class="box">
				<div class="four">
					<div class="top1">
						<div class="cicle">

						</div>
						<div class="cicle">

						</div>
					</div>
					<div class="bottom1">
						<div class="cicle">

						</div>
						<div class="cicle">

						</div>
					</div>
				</div>
			</div>
			<!--第五个-->
			<div class="box">
				<div class="five">

					<div class="top1">
						<div class="cicle">

						</div>
						<div class="cicle">

						</div>
					</div>
					<div class="point">
						<div class="cicle">

						</div>
					</div>
					<div class="bottom1">
						<div class="cicle">

						</div>
						<div class="cicle">

						</div>
					</div>

				</div>

			</div>
			<!--第六个-->
			<div class="box">
				<div class="six">
					<div class="top2">
						<div class="cicle">

						</div>
						<div class="cicle">

						</div>
						<div class="cicle">

						</div>

					</div>
					<div class="bottom2">
						<div class="cicle">

						</div>
						<div class="cicle">

						</div>
						<div class="cicle">

						</div>

					</div>
				</div>
			</div>
			<!--第七个-->
			<div class="box">
				<div class="seven">
					<div class="seven1" >
						<div class="cicle" style="align-self: flex-start;">

						</div>
						<div class="cicle">

						</div>
						<div class="cicle" style="align-self: flex-end;">

						</div>
					</div>
					<div class="seven2">
						<div class="seven3" style="padding-left: 20px ;">
							<div class="cicle">

							</div>
							<div class="cicle">

							</div>
						</div>
						<div class="seven4" style="padding-right:20px ;">

							<div class="cicle">

							</div>
							<div class="cicle">

							</div>
						</div>

					</div>

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

</html>
雕琢时光纸戆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
sonnylight的博客
08-03 3093
Flex布局实现骰子 *{ padding:0; margin:0; } body{ background: black; } .container{ position: relative; width: 100px; heigh
如何用flex定位写出骰子的六个面
Xxxcxyz的博客
07-18 602
注：class=“face”设置的为骰子的样式 仅写一次 每个骰子都添加了class为face的属性名 一点时 body： <div class="face face1"> <span></span> </div> css： .face{ float: left; margin: 16px...
利用flex制作筛子
冰雪为融的博客
04-22 610
如果对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布局写骰子
exploringfly的博客
02-22 2833
骰子一共有6个面，先构建6个div，写上样式：.box1 { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; margin:...
flex弹性盒子做骰子详解
qq_43806604的博客
12-05 4237
什么是flex 网页布局是css的一个重点应用。 我们传统的布局的解决方案是基于盒装模型，依赖display属性+position属性+float属性。而这种布局相对来说不是很方便，类似垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----flex布局，可以简便、完整、响应式地实现各种浏览器的支持，这就意味着，现在能很安全的使用这项功能。 弹性盒子来制作骰子 做出来的效果就是这样的 那么我们该如何用弹性布局来实现呢 首先我们要了解弹性盒子使用流程 首先我们要定义一个弹性盒子 displa
flex 手写在线签名实现代码第1/2页
10-29
企业信息系统中，有时候需要用到手写签名的功能。在这里用flex 实现一个。功能实现了，效果还在改善中。
用Flex写的一个入门程序
03-06
标题 "用Flex写的一个入门程序" 暗示了这篇内容是关于使用Adobe Flex进行编程的初学者教程。Flex是一个开源框架，主要用于构建富互联网应用程序（Rich Internet Applications, RIA），它基于ActionScript和MXML语言...
用flex写的博客用flex写的博客
08-01
这个标题和描述反复提到了“用flex写的博客”，这暗示我们将探讨如何使用Flex技术来创建一个博客系统。 在Flex中，MXML是一种声明式语言，主要用于构建用户界面，它允许开发者以XML格式定义组件布局和属性。...
前端学习--用flex布局来写--携程首页
05-11
9. **实际应用**：在重构携程首页时，可以将各个模块（如顶部导航、搜索框、推荐目的地等）设为Flex子元素，通过调整它们的Flex属性，达到预期的布局效果。 总之，使用Flex布局重构携程首页，能够有效地解决页面...
flex写的计算器
09-21
这个“flex写的计算器”项目显然是一款使用Flex技术构建的计算器应用，它可能结合了ActionScript、MXML以及Flex SDK来实现图形用户界面和交互功能。 在Flex中，MXML是用于构建用户界面的标记语言，类似于HTML，但更...
【CSS flex布局】用flex写个骰子
Hemri2580的博客
10-20 1197
用flex写个骰子
CSS：flex实现骰子的6个面
weixin_30892763的博客
01-03 1744
用flex实现骰子的六个面，实现效果如下： 实现代码如下： <html> <head> <style> body { background-color: #000000; display: flex; ...
flex布局小案例——制作骰子
super码力的博客
11-08 4798
制作点数一到六的骰子，看了这篇还不会制作骰子，欢迎私信！制作骰子首先需要学会flex的基础原理
flex布局实现色子
liona_koukou的博客
10-11 4211
1、色子数：1 思路：让圆点（即子元素）在横轴上居中在竖轴上居中，分别用justify-content和align-items 实现代码：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/
【CSS】用 flex 布局画骰子
weixin_42678675的博客
07-09 2732
CSS常考题之——flex。用 flex 布局画出骰子中的点数，进来看看吧！
flex布局实现筛子点数以及对于flex布局的思考
忙着开花儿
03-23 1000
之前在一次面试中被问道flex布局较普遍CSS布局的优点在什么地方，就个人经历而言，flex布局比普通CSS布局简便很多，比如我们要进行一个简单的一行四个li的无序列表的排列，要求相邻li元素间隔自适应，首尾元素要与ul容器没有间隙，效果图如下：普通CSS布局为：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta...
flex布局实战——骰子案例
delong1998的博客
03-02 1066
flex布局实战——筛子案例 下面将用flex布局来以次生成各个筛子。 初始化页面 css代码： <style> .main { width: 200px; height: 200px; border: #999999 solid 1px; } .box { width: 30%;
HTML写一个登录框样式
热门推荐
TISRNW的博客
09-19 1万+
以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。 写好之后是这个样子 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <styl...
用js做一个简单的计算器
TISRNW的博客
10-29 1757
实现并不困难 1，我们首先把样式写出来 2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。 3，对于清零，取反，取百分数代码中有详细说明。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...
html利用flex布局制作筛子
最新发布
07-27
您可以使用Flex布局来制作一个筛子的HTML页面。下面是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .dice { width: 200px; height: 200px; border: 1px solid black; display: flex; flex-wrap: wrap; } .dot { width: 33.33%; height: 33.33%; background-color: black; } </style> </head> <body> <div class="container"> <div class="dice"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </body> </html> ``` 在这个示例中，我们使用Flex布局来创建一个名为`container`的容器，使其居中显示在屏幕上。然后，在容器中创建一个名为`dice`的容器，它是一个正方形，并且使用Flex布局的`flex-wrap`属性来让内部元素换行显示。每个小点使用`dot`类来表示，通过调整宽度和高度，使其占据`dice`容器的1/3大小，并设置背景颜色为黑色。 这样，您就可以使用Flex布局制作一个简单的筛子。您可以根据需要进行调整和美化。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值