使用组合类名flex布局实现骰子

最新推荐文章于 2022-07-26 16:39:30 发布
最新推荐文章于 2022-07-26 16:39:30 发布
阅读量128 收藏
点赞数
文章标签： html css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50015961/article/details/110533833
版权

实现9个骰子，如下图所示：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex容器组合-9点筛子</title>
		<link rel="stylesheet" type="text/css" href="flex.css"/>
	</head>
	<body>
		<div class="box display-block-flex">
			<div class="item-box display-inline-flex align-items-center justify-content-center">
				<div class="item"></div>
			</div>
			<div class="item-box display-inline-flex justify-content-space-between">
				<div class="item"></div>
				<div class="item align-self-flex-end"></div>
			</div>
			<div class="item-box display-inline-flex justify-content-space-between">
				<div class="item"></div>
				<div class="item align-self-center"></div>
				<div class="item align-self-flex-end"></div>
			</div>
			<div class="item-box display-inline-flex justify-content-space-between">
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item "></div>
				</div>
			</div>
			<div class="item-box display-inline-flex justify-content-space-between">
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="display-block-flex align-items-center justify-content-center">
					<div class="item"></div>
				</div>
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item "></div>
				</div>
			</div>
			<div class="item-box display-inline-flex justify-content-space-between">
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item "></div>
					<div class="item "></div>
				</div>
			</div>
			<div class="item-box display-inline-flex justify-content-space-between">
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="display-block-flex align-items-center">
					<div class="item"></div>
				</div>
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item "></div>
					<div class="item "></div>
				</div>
			</div>
			<div class="item-box display-inline-flex justify-content-space-between">
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item "></div>
					<div class="item "></div>
					<div class="item"></div>
				</div>
			</div>
			<div class="item-box display-inline-flex justify-content-space-between">
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="display-block-flex justify-content-space-between flex-flow-column">
					<div class="item"></div>
					<div class="item "></div>
					<div class="item "></div>
				</div>
			</div>
		</div>
		<style type="text/css">
			.box{
				width: 1500px;
				border-radius: 10px;
				background-color: #000000;
				margin: 0 auto;
				padding: 10px;
			}
			.item-box{
				margin: 16px;
			  padding: 4px;
			  
			  background-color: #e7e7e7;
			  width: 104px;
			  height: 104px;
			  object-fit: contain;
			  
			  box-shadow:
			    inset 0 5px white, 
			    inset 0 -5px #bbb,
			    inset 5px 0 #d7d7d7, 
			    inset -5px 0 #d7d7d7;
			  
			  border-radius: 10%;
			}
			.item{
				width: 24px;
				height: 24px;
				border-radius: 50%;
				background-color: #333;
  				box-shadow: inset 0 3px #111, inset 0 -3px #555;
			}
			
		</style>
	</body>
</html>

flex.css链接

習慣-學習
关注
专栏目录
html简单骰子展示
是建威啊的博客
06-23 2369
html绘制骰子
flex类名组合样式.css
12-03
flex的属性的整理，可以直接使用类名进行组合实现flex布局。项目的属性,order,flex-grow,flex-shrink,flex-basis,flex.需要在项目中添加对应的样式
使用类名，高效快捷的进行flex布局
jj812118的博客
03-25 246
背景 如今前端开发，使用flex进行布局已经非常普遍了。就我本身举例，除了特别的定位，不论整体还是细节的布局，基本上都使用flex来实现，不仅高效而且简洁。 但是使用flex布局，重复的场景非常多，都是常用的几个属性和属性值： 定义flex布局：display: flex; 定义主轴：flex-direction: row | column; 定义主轴对齐方式：justify-content: flex-start | center; 需要的话，再定义交叉轴对齐方式：align-items: flex
flex弹性布局的应用一之属性组合
The road to success is lonely
06-14 399
这四种属性由不同的属性值进行组合，会产生不同的变化，很是奇妙，学会如何运用会有很大帮助。我写的是我经常用的几种组合方式，供大家借鉴。 flex-direction的属性值：https://www.runoob.com/cssref/css3-pr-flex-direction.html justify-content的属性值：https://www.runoob.com/cssref/css3-p...
管用常用的CSS样式库整理:拿来即用CSS,便捷化的Flex组合通用属性配置::便于网页/小程序快速设置样式属性实现想要的效果::
第一段代码的博客
07-26 1857
管用常用的CSS样式库整理:拿来即用CSS,便捷化的Flex组合通用属性配置::便于网页/小程序快速设置样式属性实现想要的效果::
用flex布局实现骰子
liubangbo的专栏
01-28 2540
实现6个骰子，如下图所示： 代码如下： <html> <head> <style type="text/css"> #bg{ height: 200px; outline: red dotted thin; display: inline-flex; /*不用定义此容器的宽度，宽度根据容器元素进行自适应*/ } ....
flex类名组合使用 scssFlex.scss
12-03
整理的flex类名组合使用，项目属性中的order，flex-grow，flex-shrink，flex-basis，flex，直接使用@include order(),@include flex-grow(),@include flex-shrink(),@include flex-basis(),@include flex(),出入相应...
详解微信小程序之scroll-view的flex布局问题
12-08
当不使用 `flex` 布局时，可以将 `scroll-view` 内的元素设置为 `display: inline-block`，它们会自动并排显示，通过调整 `width` 和 `margin` 可以实现横向滚动。这种方法简单，但可能不适用于更复杂的布局需求。 ...
flex移动布局，极简公共样式包，附demo
04-12
总的来说，这个“flex移动布局，极简公共样式包”是一个强大的工具，它简化了移动端响应式布局的实现，尤其适合混合APP开发。通过学习和运用Flex布局及其公共样式包，开发者可以创建出更加灵活、适应性强的Web界面，...
使用flex布局实现底部导航栏
最新发布
11-27
使用flex布局实现底部导航栏的步骤如下： 1. HTML结构 ```html 首页 分类 购物车 我的 ``` 2. CSS样式 ```css .nav { display: flex; justify-content: space-between; align-items: center; height: 50...
flex布局示例：骰子的制作
weixin_43748812的博客
12-11 1249
html代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&
Flex布局实战（一）：骰子
热门推荐
若水弹丸之地
10-13 1万+
一、单项目 （0）初始化 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;style type=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;text/css&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&a
弹性布局做骰子布局
最爱喝怡宝的博客
12-01 3467
使用弹性布局完成骰子 一点 到 九点 的布局；（七点和八点没写） 先做出基本样式： <style> /* 全局样式 */ *{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; } /* body背景颜色，让整个骰子居中显
详解flex布局做骰子案例
yun_shuo的博客
12-26 6060
详解flex布局做骰子案例 上次案例用到了css3的3D特效，3D特效做正方体也是很常用的，所有我想到了利用css3做一个骰子，而骰子每一面的点数利用定位做起来很麻烦，利用css3的flex布局是很方便的，这次来看看如何利用flex弹性盒子的一些属性完成骰子点数的布局~ 首先，建立一个3D空间元素，做成正方体，是上一篇中详细介绍过如何创建一个3D空间元素，这里就不细说了~实现一个正方体的原理是，在一个父元素中包含六个子元素，transform:rotate和translate来转变好每一个的面，在编写过程中
flex 布局转 class 类名实现
言小溪 的博客
08-25 512
目录代码测试flex-wrap属性 : nowrapflex-wrap属性 : wrapalign-items属性 : baselinealign-content属性 : flex-endjustify-content属性 : space-around 首先我们定义一个 less 文件 ， 然后编译 代码 .flex { display: flex; } @wrap: nowrap, wrap; @align-content: flex-start, flex-end, cente
【CSS】用 flex 布局画骰子
weixin_42678675的博客
07-09 2766
CSS常考题之——flex。用 flex 布局画出骰子中的点数，进来看看吧！
蓝桥杯【页面布局】Flex 经典骰子布局（web应用开发）
m0_61631823的博客
12-16 1313
要求： 补全 index.html 文件空缺的 css 代码。 骰子 1：使用justify-content与align-items属性实现。 骰子 2：使用justify-content、flex-direction与align-items属性实现。 骰子 3：使用justify-content、align-self与align-items属性。 骰子 4、5、6、7、9 布局结构类似：使用justify-content、align-self、flex-directi...
html色子的页面布局,弹性布局（骰子）.html
weixin_42615290的博客
06-29 639
* {margin: 0;padding: 0;}ul {margin: 10px;list-style: none;width: 50px;height: 50px;display: -webkit-box;display: -webkit-flex;display: flex;border: 1px solid gray;border-radius: 8px;padding: 4px;-web...
利用flex布局来column分布
qq_37555524的博客
09-14 3194
html代码 <div class='items'> <div class='item'></div> <div class='item'></div> <div class=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值