flex布局实现骰子六面的示例

显示效果：

下面是示例代码：

<html><head><title>flex布局-骰子</title><style>body {background-color: tan;display: flex;flex-wrap: wrap;align-content: flex-start;}.box {background-color: white;border-radius: 10px;width: 75px;height: 75px;display: flex;margin: 10px;padding: 10px;}.item {background-color: darkblue;border-radius: 10px;width: 20px;height: 20px;}.box1 {justify-content: center;align-items: center;}.box1 .item {background-color: red;border-radius: 15px;width: 30px;height: 30px;}.box2 {justify-content: space-around;align-items: center;}.box3 {justify-content: space-around;}.box3 .item:nth-child(2) {align-self: center;}.box3 .item:nth-child(3) {align-self: flex-end;}.box4 {flex-wrap: wrap;align-content: space-around;}.box4 .column {flex-basis: 100%;display: flex;justify-content: space-around;}.box4 .item {background-color: red;}.box5 {flex-wrap: wrap;align-content: space-between;}.box5 .column {flex-basis: 100%;display: flex;justify-content: space-between;}.box5 .column:nth-child(2) {justify-content: center;}.box5 .item {margin: 2px;}.box6 {flex-wrap: wrap;justify-content: space-around;align-content: space-around;}</style></head><body><div class="box box1"><span class="item"></span></div><div class="box box2"><span class="item"></span><span class="item"></span></div><div class="box box3"><span class="item"></span><span class="item"></span><span class="item"></span></div><div class="box box4"><div class="column"><span class="item"></span><span class="item"></span></div><div class="column"><span class="item"></span><span class="item"></span></div></div><div class="box box5"><div class="column"><span class="item"></span><span class="item"></span></div><div class="column"><span class="item"></span></div><div class="column"><span class="item"></span><span class="item"></span></div></div><div class="box box6"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div></body>
</html>

flex布局实现骰子六面的示例相关推荐

弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
css使用flex布局实现骰子1~6
css使用flex布局实现骰子1~6 效果 Html <body><div class='div1 border'><span></span></ ...
网页HTML5制作flex布局骰子,flex布局实现骰子
学习flex布局后的实例布局--骰子具体实现原理可参考阮一峰的Flex 布局教程:实例篇和博客flex布局实现色子效果图: 骰子.png 代码如下: flex布局实例--骰子 *{ margin: ...
网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
主要是利用flex的一些特性来写的,掌握好flex基础,写出筛子的几个页面不是问题. 推荐去我写的一个博客中有flex的小练习线上练习flex布局 html css .shaizi { width: ...
用flex布局画骰子的六个面
1 直接暴力主轴侧轴垂直居中就好,为更直观的体现效果,以下代码忽略了样式写法,参考flex部分即可 .box {display:flex;justify-content: center;align-i ...
弹性布局（骰子六个面制作）
效果图 html页面 <!DOCTYPE html> <html lang="zh"><head><meta charset=" ...
Web前端笔记（9） flex布局
flex弹性布局: 1. flex弹性盒模型: 随着移动互联网的发展,对布局的要求越来越高,传统的布局方案对于实现特殊布局非常的不方便,比如垂直居中,2009年W3C提出了一种新的布局方案---fle ...
flex布局，弹性盒子，css使用及理解
flex布局以下内容主要分为四个部分: 常见概念 flex容器相关属性 flex元素相关属性 flex布局的应用 flex布局的兼容性处理 flex布局的相关概念弹性盒模型弹性盒模型(Flexi ...
Flex布局做出自适应页面--语法和案例
本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...

flex布局实现骰子六面的示例

flex布局实现骰子六面的示例相关推荐

最新文章

热门文章