css使用flex布局实现骰子1~6

效果

Html

<body><div class='div1 border'><span></span></div><div class='div2 border'><span></span><span></span></div><div class='div3 border'><span></span><span></span><span></span></div><div class='div4 border'><div class='flex-row'><span></span><span></span></div><div class='flex-row'><span></span><span></span></div></div><div class='div5 border'><div class='flex-row'><span></span><span></span></div><div class='flex-row'><span></span></div><div class='flex-row'><span></span><span></span></div></div><div class='div6 border'><div class='flex-column'><span></span><span></span><span></span></div><div class='flex-column'><span></span><span></span><span></span></div></div>
</body>

css

<style>* {padding: 0;margin: 0;}.border {margin: 30px;padding: 3px;border-radius: 3px;width: 100px;height: 100px;border: 1px solid #999;display: flex;}span {display: block;border-radius: 50%;width: 32px;height: 32px;border: 0;background-color: #999;}.flex-row {flex-direction: row;}.flex-column {flex-direction: column;}.div1 {align-items: center;justify-content: center;}.div2 {flex-direction: column;justify-content: space-between;}.div2>span:nth-child(2) {align-self: flex-end;}.div3 {flex-direction: column;justify-content: space-between;}.div3>span:nth-child(2) {align-self: center;}.div3>span:nth-child(3) {align-self: flex-end;}.div4 {flex-direction: column;justify-content: space-between;}.div4 > div{display: flex;justify-content: space-between;}.div5 {flex-direction: column;align-content: space-between;justify-content: space-between;}.div5 > div{display: flex;justify-content: space-between;}.div5 > div:nth-child(2){justify-content: center;}.div6{flex-direction: row;justify-content: space-around;}.div6>div{display: flex;flex-direction: column;justify-content: space-around;}
</style>

css使用flex布局实现骰子1~6相关推荐

网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
主要是利用flex的一些特性来写的,掌握好flex基础,写出筛子的几个页面不是问题. 推荐去我写的一个博客中有flex的小练习线上练习flex布局 html css .shaizi { width: ...
弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
CSS 之 Flex布局
CSS 之 Flex布局文章目录 CSS 之 Flex布局 1.Flex布局 vs 网格布局 (1D vs 2D) 2.Flex属性 1)flex-direction属性 & 排列方向 2) ...
CSS的Flex布局的学习
CSS的Flex布局的学习哔哩哔哩链接:https://www.bilibili.com/video/BV1iE411y7hb?p=131 Flex(弹性盒.伸缩盒)是CSS中的又一种布局手段,它主 ...
网页HTML5制作flex布局骰子,flex布局实现骰子
学习flex布局后的实例布局--骰子具体实现原理可参考阮一峰的Flex 布局教程:实例篇和博客flex布局实现色子效果图: 骰子.png 代码如下: flex布局实例--骰子 *{ margin: ...
通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...
css之flex布局
flex布局是css3中的重要布局方式,称为"弹性布局",每次想到它主要是遇到元素垂直居中.元素宽高自适应的问题,这些问题在flex中都能过简单设置就解决,它更像是原生APP中的布 ...
详解CSS的Flex布局
本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...
flex布局实现骰子六面的示例
显示效果: 下面是示例代码: <html><head><title>flex布局-骰子</title><style>body {backgr ...

css使用flex布局实现骰子1~6

css使用flex布局实现骰子1~6

效果

Html

css

css使用flex布局实现骰子1~6相关推荐

最新文章

热门文章