flex 布局写出麻将一到九筒

首先写公共样式

*{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: black;
}

 一筒<div class="DivOne"><p class="Pone"></p>  </div>

.DivOne{justify-content: center; /* 主轴对齐方式 */align-items: center;     /* 副轴对齐方式 */}

 二筒<div class="Divtwo"><p class="Ptwo"></p><p class="Ptwo"></p></div>

.Divtwo{flex-direction: column;
justify-content: center;
align-items: center;
}
.Ptwo{margin-top: 12px;
}

 三筒<div class="Divstr"><p ></p><p class="Pstr2"></p><p class="Pstr3"></p> </div>

.Divstr{flex-direction: column;}.Pstr2{align-self: center;
}
.Pstr3{align-self: flex-end;
}

 四筒<div class="DivFour"><p></p> <p></p> <p></p> <p></p> </div>

.DivFour{flex-wrap: wrap;justify-content: space-between;align-content: space-between;
}

 五筒<div class="DivFive"><p></p> <p></p> <section><p></p>  </section><p></p> <p></p></div>

section {width: 200px;height: 70px;display: flex;justify-content: center;
}
section>p{align-items: center;
}

 六筒<div class="Divsix"><p></p>  <p></p> <p></p> <p></p> <p></p> <p></p> </div>

.Divsix{flex-wrap: wrap;justify-content: space-between;align-content: space-between;
}

 七筒<div class="Divseven"><h1><p></p></h1><h1><p></p></h1><h1><p></p></h1><h2><p></p><p></p></h2><h2><p></p><p></p></h2></div>

.Divseven{flex-direction: column;align-items: center;
}
.Divseven h2{display: flex;
}
.Divseven h2 p{display: flex;
}
.Divseven h1{width: 150px;
}
.Divseven h1 p{display: flex;width: 50px;height: 50px;background-color: green;
}.Divseven h1:nth-child(2){display: flex;justify-content: center;
}
.Divseven h1:nth-child(3){display: flex;justify-content: flex-end;
}

 八筒<div class="Divsix"><p></p>  <p></p> <p></p> <p></p> <p></p> <p></p> </div>

.Divsix{flex-wrap: wrap;justify-content: space-between;align-content: space-between;
}

 九筒<div class="Divsix Divn"><p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div>

.Divn>p{width: 60px;
}
.Divn>p:nth-child(-n+3){background:green;}

flex 布局写出麻将一到九筒相关推荐

flex布局写一个永动机~
这是我无聊写的一个可以一直循环转动的抽奖机,只有点暂停的时候才会暂停,多的话不说上代码~ <!DOCTYPE html> <html lang="en">& ...
关于今天在写 flex 布局，遇到 for 循环后的失效问题
最开始我的 for 循环和 flex 布局写在同一层,就出现了我想让他横着排列,结果却不生效 <view class="size" v-for="(item, ...
【Flex布局案例】使用Flex布局搭建静态页面
最近整理自己零散的知识点,把以前刚学写的小demo放上来,这个页面是自己刚学flex布局写的页面. html部分: <!DOCTYPE html> <html lang=" ...
一文学会使用flex布局与自定义组件，写好微信小程序“身体“
微信小程序实战化学习--flex布局及组件化复用前言:kissing: 1.Flex布局 1.1 Flex使用前了解 1.2 容器属性 flex-direction(项目的排列方向) flex-wr ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录从零开始学前端:程序猿小白也可以完全 ...
演示和解析Flex布局中的各种属性
文章目录文章导读一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
[转]详解Flex布局（语法+教程）
Flex 布局教程:语法篇作者: 阮一峰原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是 CSS ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...

flex 布局写出麻将一到九筒

flex 布局写出麻将一到九筒相关推荐

最新文章

热门文章