我用 flex 布局 写了 9 个麻将

最新推荐文章于 2024-04-15 11:41:35 发布
最新推荐文章于 2024-04-15 11:41:35 发布
阅读量952 收藏 14
点赞数 4
文章标签： 前端 javascript css html 开发语言
原文链接：https://mp.weixin.qq.com/s?__biz=MzI3NzU5MjQ0MA==&mid=2247484365&idx=1&sn=1f094b6ca8caddce1be6ffdca2b40a2a&chksm=eb62a3dadc152acc81d9b5a852ee8c8bf3d1574fa79ae97e3d749f914750485ef4871a66c44f&scene=126&&sessionid=0
版权

作者：linwanxia
/post/7074567009823883300

前言

为了深入了解 flex 布局，我用 它 写了 9个麻将，当然，你也可以试试骰子，大同小异。

0ebdbb42f3de422a30a339feff3cc7b0.jpeg

先来回顾一下 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：自身侧轴垂直居中对齐（设置给弹性盒子的子元素）

一、初始布局与公共样式

一开始是想用 div 来写，后来改成 ul li 更合适。

1、基础布局

<body>
    <!-- ◆基础布局 -->
    <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">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </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>
</body>

2、公共样式

<style>
       /* ◆公共样式 */
       * {
           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;
       }
</style>

3、页面初始效果

f2ff3a75cd5b37e0d74dcbb07f4fe173.jpeg

二、9个 饼的具体样式

一饼

/* ◆法1*/
       /* .ul1 {
           display: flex;
           justify-content: center;
       }
       .ul1>li {
           align-self: center;
       } */
       
/* ◆法2 */
       .ul1 {
           display: flex;
           justify-content: center;
           align-items: center;
       }

cc1aca2391cefb84c9a8ccf71b2bde79.jpeg

二饼

.ul2  {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

9410c312dfa06c9d7a6445bc9def79a2.jpeg

三饼

.ul3 {
           display: flex;
           flex-direction: column; 
           justify-content: space-between; 
           padding: 5px;
       }
       .ul3 li:nth-child(2) {
           align-self: center;
       }
       .ul3 li:nth-child(3) {
           align-self: flex-end;
       }

22f62484cd35c8d03949117c4b2b541d.jpeg

四饼

.ul4  {
           display: flex;
           flex-wrap: wrap;
           align-items: center;
       }
       .ul4 li {
           margin:15px 10px;
       }

bd9223d16be30ab7fa79c7d6025e807e.jpeg

五饼

.ul5 {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-around;
           align-items: center;
       }
       .ul5 li:nth-child(3) {
           margin: 0 30px;
       }

fa03534f00523a05c5f99cf8d719bde3.jpeg

六饼

.ul6 {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-around;
           align-items: center;
       }
       .ul6 li {
           margin: 0 10px;
       }

6c4793cad5911bfb213cf7bcf0bcb8ad.jpeg

八饼

/* ◆法1：紧凑一些 */
      /* .ul8 {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding: 10px 20px;
      } */
      
/* ◆法2：松弛一些*/
      .ul8 {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
      }
      .ul8 li {
          margin: 0 10px;
      }

14c34826a7c75683ffe9aade237ef1ad.jpeg

九饼

/* ◆法1：紧凑一些 */
       /* .ul9 {
          display: flex;
          flex-wrap: wrap;
          padding: 10px;
          align-items: center;
      } */
/* ◆法2：松弛一些 */
      .ul9 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-items: center;
          padding: 5px;
      }

556fa8b2f6136b45baef4eca7f927431.jpeg

七饼

之所以把七饼放在最后，因为它较复杂。本来打算写一个 ul 的，也写出来了，有点丑~，后来改用 div 包了两个 ul ,上面的 ul 放 3 个 li ,下面的 ul 放 4 个 li，参考前面三饼和四饼的写法，就 ok 了。

<!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;
           box-sizing: border-box;
       }

       .box {
           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;
       }

       .box ul {
           display: flex;
           justify-content: space-between;
           width: 80px;
           height: 50px;
           margin: 0;
           padding: 5px;
       }
       /* 第一给圆圈：自身默认靠左上伸缩，可以不写 */
       .top li:nth-child(1) {
           align-self: flex-start;
       }
       /* 第二个圆圈：自身居中伸缩 */
       .top li:nth-child(2) {
           align-self: center;
       }
       /* 第三个圆圈：自身靠右下伸缩 */
       .top li:nth-child(3) {
           align-self: flex-end;
       }
       /* 最后四个圆圈的 父元素 ul */
       .box .bottom {
           flex-wrap: wrap;
           padding: 0 12px;
       }
   </style>
</head>

<body>
   <box class="box">
       <ul class="top">
           <li></li>
           <li></li>
           <li></li>
       </ul>
       <ul class="bottom">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </box>
</body>
</html>

d5c466f38bf16db34e09803985512fb8.jpeg

voanit
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex 布局写出麻将一到九筒
weixin_53388736的博客
05-07 1912
首先写公共样式 *{ 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:
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
麻将点数布局（flex布局应用（存在不足，欢迎大神指正））
qq_42275455的博客
09-08 1258
一点 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .box { border-
css面试题之flex实现麻将三饼布局
最新发布
qq_58174484的博客
04-15 379
麻将应该很多人都熟悉吧，那如何通过flex布局尽可能使用少的节点来实现“三饼（也有人管它叫桶）”的效果呢？（ps:麻将牌效果如下）3.对三个饼依次设置align-self为self-start、center、self-end来实现垂直均分。2.通过设置justify-content: space-between;使得三个饼能够均分区域并排列。1.首先先通过flex修饰外层容器，内部的三个节点分别代表三个大饼。总之，学习css是一个长期积累的过程，积硅步方可至千里。希望本文会对您有所帮助 ^_^
[面试专题]Flex 布局
weixin_33938733的博客
08-28 640
Flex 布局 标签（空格分隔）： flex css Flex: Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。容器分为两种,块flex和行内flex. .box{ display:flex;/*webkit需要加前缀*/ /*display:i...
Flex弹性布局 入门实例
CSDN_gmm的博客
10-17 522
利用flex布局，写了从一到九的麻将排版格式 父元素（容器）：flex container flex-direction： 子元素（项目）的排列方向，默认 row flex-wrap： 子元素（项目）的总宽度超出时是否换行，默认 nowrap flex-flow： 上两种属性的简写，默认 row nowrap justify-content： 主轴 main axis 的对齐方式，默认 fle...
flex布局学习—实现9个麻将大饼
weixin_44198972的博客
03-18 677
最近在复习flex布局，刷到一篇实现麻将里面9个饼图的博文，练习一下。 效果图 先来回顾一下 flex 布局的几个常用属性： display 为 flex：弹性盒子 justify-content：水平对齐方式 flex-start：主轴靠左对齐（默认值） flex-end：主轴靠右对齐 center：主轴水平居中对齐 space-around：两端对齐，两端间距是中间距离的一半 space-between：两端靠边对齐，中间等距 space-evenly：两端对齐，两端间距与中间距离等距 align-i
Flex布局
03-29
是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在移动端开发上已是主流，比如H5页面，微信小程序等等。   Why ...
flex布局实现上下固定中间滑动的布局方式
11-20
固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 ...
使用Flex布局实现头部固定内容区域滚动的方法
12-28
页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。 Flex布局好处：1.不破坏html文档流 2.兼容性更好。 display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。 ...
详解CSS3伸缩布局盒模型Flex布局
09-22
主要介绍了详解CSS3伸缩布局盒模型Flex布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
flex麻将和牌源代码
03-16
NULL 博文链接：https://fykyx521.iteye.com/blog/409109
一款基于css3麻将筛子3D翻转特效的实例教程
12-30
css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。 　　第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下： XML/HTML Code复制内容到剪贴板 <body>   <div u00a0id=outer>       <div u00a0id=group>           <div u00a0class=page id>.</div>           <div u00a0class=page id>..</div>           <div c
flex移动布局，极简公共样式包，附demo
04-12
flex移动布局，极简公共样式包，可极大程度节约前端切图时间，对于响应式切图极为实用，兼容性较好，尤其适用于APP混合开发，附简易demo
flex+as3麻将游戏源码
09-21
一款flex+as3游戏源码，是学习的好资料。
弹性布局入门
weixin_51890559的博客
12-06 52
Flex布局入门——实例（扑克牌）
CDTZYXZZY的博客
07-07 328
通过简单的实例，熟悉flex布局的几个简单的属性，感受flex布局的思路

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值