flex布局学习—实现9个麻将大饼

已于 2022-03-18 16:21:06 修改
阅读量668 收藏 7
点赞数 1
文章标签： css 学习 css3
于 2022-03-18 16:19:23 首次发布
原文链接：https://juejin.cn/post/7074567009823883300
版权

最近在复习flex布局，刷到一篇实现麻将里面9个饼图的博文，练习一下。

效果图

在这里插入图片描述

先来回顾一下 flex 布局的几个常用属性：

display 为 flex：弹性盒子
justify-content：水平对齐方式

flex-start：主轴靠左对齐（默认值）
flex-end：主轴靠右对齐
center：主轴水平居中对齐
space-around：两端对齐，两端间距是中间距离的一半
space-between：两端靠边对齐，中间等距
space-evenly：两端对齐，两端间距与中间距离等距

align-items 为 center ：侧轴垂直居中对齐
flex-wrap 为 wrap, wrap 是换行，默认 nowrap 不换行
flex-direction 为 column：主轴和侧轴换位置，名字不变
align-self 为 center：自身侧轴垂直居中对齐（设置给弹性盒子的子元素）

实现
<style type="text/css">
			* {
			    margin: 0;
			    padding: 0;
			    box-sizing: border-box;
			}
			
			ul {
			    float: left;
			    margin: 10px 0 0 10px;
			    width: 80px;
			    height: 100px;
			    background-color: #ccc;
			    border-radius: 5px;
			}
			
			li {
			    list-style: none;
			    width: 20px;
			    height: 20px;
			    border-radius: 50%;
			    background-color: red;
			}
			
			.ul1{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.ul2{
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: column;
			}
			.ul3{
				display: flex;
				flex-direction: column;
				padding: 5px;
				justify-content: space-around;
			}
			.ul3 li:nth-child(2){
				align-self: center;
			}
			.ul3 li:nth-child(3){
				align-self: flex-end;
			}
			.ul4{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
			}
			.ul4 li{
				margin: 5px;
			}
			.ul5 {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
			}
			.ul5 li:nth-child(3){
				margin: 0 30px;
			}
			.ul6{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
			}
			.ul6 li{
				margin: 5px;
			}
			.ul7{
				display: flex;
				flex-wrap: wrap;
			}
			.ul7 div{
				display: flex;
				justify-content: space-between;
				width: 80px;
				height: 50px;
				margin: 0;
				padding: 5px;
			}
			.top li:nth-child(2){
				align-self: center;
			}
			.top li:nth-child(3){
				align-self: flex-end;
			}
			.bottom{
				flex-wrap: wrap;
			}
			.bottom li {
				margin: 1px 5px;
			}
			.ul8{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}
			.ul8 li{
				margin: 0 10px;
			}
			.ul9{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
			}
			.ul9 li {
				margin: 0 2px;
			}
			.ul9{
				display: flex;
				flex-wrap: wrap;
			}
		</style>
	</head>
	<body>
		<div id = 'app'>
			<ul class="ul1">
			        <li></li>
			    </ul>
			    <ul class="ul2">
			        <li></li>
			        <li></li>
			    </ul>
			    <ul class="ul3">
			        <li></li>
			        <li></li>
			        <li></li>
			    </ul>
			    <ul class="ul4">
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			    </ul>
			    <ul class="ul5">
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			    </ul>
			    <ul class="ul6">
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			    </ul>
			    <ul class="ul7">
					<div class="top">
						<li></li>
						<li></li>
						<li></li>
					</div>
					<div class="bottom">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</div> 
			    </ul>
			    <ul class="ul8">
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			    </ul>
			    <ul class="ul9">
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			        <li></li>
			    </ul>
		</div>
	</body>

转载自：
作者：linwanxia
链接：https://juejin.cn/post/7074567009823883300

西柚走走。
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex 布局写出麻将一到九筒
weixin_53388736的博客
05-07 1893
首先写公共样式 *{ margin: 0px; padding: 0; } div{ width: 200px; height: 250px; border: 1px solid red; display: flex; float: left; padding: 20px; } p{ width: 70px; height: 70px; border-radius: 50%; background-color:
HTML5 掷骰子游戏 麻将骰子.rar
07-10
基于 HTML5 的掷骰子游戏，点击开始按钮，即可“掷”骰子，代码中有丰富的注释，对研究学习HTML5是很不错的范例。严格来说，这不是游戏，只是掷骰子的动画效果，可用于HTML5开发的掷骰子游戏中。
flex麻将和牌源代码
03-16
NULL 博文链接：https://fykyx521.iteye.com/blog/409109
我用 flex 布局 写了 9 个麻将
weixin_45178716的博客
03-16 934
作者：linwanxia/post/7074567009823883300前言为了深入了解 flex 布局，我用 它 写了 9个麻将，当然，你也可以试试骰子，大同小异。先来回顾一下 fle...
css面试题之flex实现麻将三饼布局
最新发布
qq_58174484的博客
04-15 369
麻将应该很多人都熟悉吧，那如何通过flex布局尽可能使用少的节点来实现“三饼（也有人管它叫桶）”的效果呢？（ps:麻将牌效果如下）3.对三个饼依次设置align-self为self-start、center、self-end来实现垂直均分。2.通过设置justify-content: space-between;使得三个饼能够均分区域并排列。1.首先先通过flex修饰外层容器，内部的三个节点分别代表三个大饼。总之，学习css是一个长期积累的过程，积硅步方可至千里。希望本文会对您有所帮助 ^_^
flex布局详解
汤姆猫的博客
05-17 154
Flexbox的核心思想是让容器具有弹性，并且可调整子元素的宽度、高度、顺序和对齐方式等属性，从而实现灵活的布局。
flex布局Flex实现常见布局的汇总
04-11
flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，有了这玩意，妈妈再也不用担心我们的布局。 先简单介绍一下，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素默认会沿主轴排列，可以控制flex子元素在主轴上伸缩，主轴方向可以设置，相关的css属性分为两类，一类是给flex容器设置的，一类是给flex子元素设置的，本文在介绍一些典型场景实现的同时也会顺带讲解部分属性，当然更详细的内容可以阅读MDN上的教程。接下来需要使用到flex-grow属性，这个是flex子元素上的属性，用来控制容器还有空间剩余时，flex子元素怎么进行扩展，默认值是0，也就是不扩展，子元素会显示为它们默认的大小，这个所谓的默认大小分几种情况： 1、如果子元素的另一个属性flex-basis设置了不为auto的具体数值，那么无论元素有没有设置具体大小都
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 colum
Flex实现圆饼视图
liusong721的专栏
09-12 976
<!--[CDATA[ import mx.collections.ArrayCollection; import mx.charts.HitData; [Bindable] public var chengjiPie:ArrayCollection = new ArrayColle
Flex 布局——语法篇
ankang1124的博客
10-23 281
该篇主要记录flex主要语法，概念不再叙述 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -web...
弹性盒flexbox
LJDbk的博客
03-01 1125
flex布局=伸缩布局 解析：任何容器都可以使用flex布局方式，通过给父元素设置flex属性，来控制子盒子的位置和排列方式。 flex-给父亲元素的常见属性 1. flex-direction:row; 主轴为x轴 子盒子从左往右排列（默认为x轴） 2. flex-direction: column; 主轴为y轴 子盒子从上往下排列 3.设置主轴上的子元素排列方式 justify-content：flex-start ;=设置子盒子在主轴上开始的地方排列 justify-con..
一款基于css3麻将筛子3D翻转特效的实例教程
09-25
主要为大家介绍了一款基于css3麻将筛子3D翻转特效的实例教程，css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程
flex+as3麻将游戏源码
09-21
一款flex+as3游戏源码，是学习的好资料。
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。...到此这篇关于Flex布局让子项保持自身高度的实现的文章就介绍到这
详解flex实现左右布局中按钮溢出隐藏效果
09-22
主要介绍了详解flex实现左右布局中按钮溢出隐藏效果的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用flex布局轻松实现页面布局的示例代码
01-18
1、上中下布局： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document<...
Flex 布局教程：实例篇
u010227042的博客
11-03 660
上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节的HTML模板一律如下。 &lt
Flex布局
zsq520520_的博客
09-24 331
在上述代码中，我们创建了一个Flex容器 ，内部包含三个Flex项目 。容器的样式设置为Flex布局，主轴方向为水平方向（），并居中对齐（和）。每个项目的样式设置为均分剩余空间（），并设置了一些简单的样式用于展示效果。通过浏览器执行上述代码如下图：我们使用标签来代替HTML中的标签，因为在微信小程序中，视图容器使用标签。接下来，对应的WXSS样式如下：在微信小程序中，我们使用WXSS来定义样式。和前面提到的HTML代码类似，我们使用了来表示容器，来表示项目。样式属性基本保持一致，只是对单位进行了适当的改变
CSS之flex布局
weixin_46570942的博客
05-02 1205
什么是flex布局 Flexbox布局,又称Flex布局，弹性盒子布局，就是用来为盒装模型提供最大的灵活性。Flex布局的主要思想是使父容器能够调节子元素的宽度和高度（以及排列顺序），从而能最好的填充可用空间（主要是为了适用所有类型的显示设备和屏幕尺寸）。Flex容器能够放大子元素使之尽可能的填充可用空间，也可以收缩子元素使之不溢出 采用flex布局的元素称为flex容器，它的所有子元素都称为flex项目，就是容器的成员 flex容器属性 1、flex-direction flex-direction决定.
flex 布局 代码实现
11-08
下面是一个简单的flex布局代码实现的例子： ```css .container { display: flex; /* 将容器设置为flex布局 */ justify-content: space-between; /* 水平方向上平均分配元素 */ align-items: center; /* 垂直方向...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值