詳解flex布局做骰子案例
上次案例用到了css3的3D特效，3D特效做正方體也是很常用的，所有我想到了利用css3做一個骰子，而骰子每一面的點數利用定位做起來很麻煩，利用css3的flex布局是很方便的，這次來看看如何利用flex彈性盒子的一些屬性完成骰子點數的布局~
首先，建立一個3D空間元素，做成正方體，是上一篇中詳細介紹過如何創建一個3D空間元素，這里就不細說了~實現一個正方體的原理是，在一個父元素中包含六個子元素，transform:rotate和translate來轉變好每一個的面，在編寫過程中，以下是我覺得對視覺效果有很好體驗的一些細節：1、視距設置在body中，值給大一些。2、背景為黑色，骰子的每一面邊框帶一些圓角和內陰影。以下是我做出一個正方體的效果。
正方體創建好后，到了這次的重點–利用彈性盒子flex的一些屬性來布局每一面的點數。
首先在每一面中創建對應的div個數，並給每一面的div設置display:flex;和flex-wrap:wrap;（彈性盒子中元素在必要時換行）樣式
點數1
第一面只有一個子div，所以只需將其中心對齊就好了。設置justify-content: center;（元素在彈性盒子主軸中心開始排列）和 align-items: center;（元素在彈性盒子交叉軸中心開始排列），就可以實現水平垂直對稱了。部分代碼如下
.father1{
justify-content: center;
align-items: center;
}
點數2
第二面兩個元素首先設置主軸元素兩側的間距相等排列，再將第二個元素靠交叉軸終點排列。部分代碼如下
.father2{
justify-content: space-around;
}
.father2 .son:nth-child(2){
align-self:flex-end;
}
點數3
第三面三個元素首先設置主軸元素兩側的間距相等排列，再將第二個元素靠交叉軸中心排列，第三個元素靠交叉軸終點排列，部分代碼如下
.father3{
justify-content: space-around;
}
.father3 .son:nth-child(2){
align-self:center;
}
.father3 .son:nth-child(3){
align-self:flex-end;
}
點數4
第三面兩個元素一排並且都是靠垂直居中些排列，這里我設置主軸元素兩側的間距相等排列，由於元素在一列排不下會自動換行，所以增大每個元素外邊距就實現效果了，部分代碼如下
.father4{
justify-content:space-around;
}
.father4 .son{
margin: 25px;
}
點數5
第五面在子元素創建時分別創三個div里面分別放2、1、2div，設置主軸元素兩側的間距相等排列，設置盒子元素縱向排列，將面底下的三個div設為彈性盒子，第一、三個div設置主軸元素兩側的間距相等排列，第二個div設置主軸元素靠中心排列，部分代碼如下
.father5{
justify-content: space-around;
flex-direction: column;
}
.father5>div{
display: flex;
}
.five_1{
justify-content: space-around;
}
.five_2{
justify-content: center;
}
.five_3{
justify-content: space-around;
}
點數6
第五面在子元素創建時分別創三個div里面分別放2、1、2div，設置主軸元素兩側的間距相等排列，設置盒子元素縱向排列，將面底下的三個div設為彈性盒子設置主軸元素兩側的間距相等排列，和盒子元素橫向排列，部分代碼如下
.father6{
flex-direction:column;
justify-content: space-around;
}
.father6>div{
display: flex;
flex-direction:row;
justify-content:space-around;
}
再給骰子用animation屬性加一個自動旋轉的效果，就更加炫酷啦，示例圖和完整代碼如下。
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> *{ margin: 0px; padding:0px; } body{ perspective:8000px; background-color: black; } .big{ position: relative; top: 300px; left: 400px; width: 200px; height: 200px; /* border: 1px solid red; */ transform-style: preserve-3d; transform:rotateX(180deg); /* transform:rotatey(90deg); */ /* transition:all 10s linear; */ animation: run 10s linear 0s infinite; } /* .big:hover{ transform:rotateX(180deg) rotatey(180deg) rotatez(180deg); } */ @keyframes run { 0%{ transform:rotateX(0deg) rotatey(0deg) rotatez(0deg); } 100%{ transform:rotateX(180deg) rotatey(180deg) rotatez(180deg); } } .father{ position: absolute; width: 200px; height: 200px; display: flex; flex-wrap:wrap; border-radius: 30px; box-shadow: 0px 0px 10px 10px #fff inset; background-color: #EEE; /* padding: 10px; */ } .son{ width: 50px; height: 50px; border-radius: 25px; background-color: black; /* margin: 25px; */ } /* 第一個面 */ .father1{ transform:rotateX(-90deg) translatez(-100px); justify-content: center; align-items: center; } .father1 .son{ background-color: brown; } /* 第六個面 */ .father6{ transform:rotateX(-90deg) translatez(100px); flex-direction:column; justify-content: space-around; } .father6>div{ display: flex; flex-direction:row; justify-content:space-around; } /* 第二個面 */ .father2{ transform:rotateY(-90deg) translatez(100px); justify-content: space-around; } .father2 .son:nth-child(2){ /* background-color: brown; */ align-self:flex-end; } /* 第五個面 */ .father5{ transform:rotateY(-90deg) translatez(-100px); justify-content: space-around; flex-direction: column; } .father5>div{ display: flex; } .father5 .son{ margin: 0px; } .five_1{ justify-content: space-around; } .five_2{ justify-content: center; } .five_3{ justify-content: space-around; } /* 第三個面 */ .father3{ transform: translatez(100px); justify-content: space-around; /* align-content:space-between; */ } .father3 .son{ margin: 0px; } .father3 .son:nth-child(2){ align-self:center; } .father3 .son:nth-child(3){ align-self:flex-end; } /* 第四個面 */ .father4{ transform: translatez(-100px); justify-content:space-around; /* align-content:space-around; */ } .father4 .son{ margin: 25px; } </style>
</head>
<body>
<div class="big">
<div class="father father1">
<div class="son son1"></div>
</div>
<div class="father father2">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="father father3">
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
</div>
<div class="father father4">
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
</div>
<div class="father father5">
<div class="five_1">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="five_2">
<div class="son"></div>
</div>
<div class="five_3">
<div class="son"></div>
<div class="son"></div>
</div>
</div>
<div class="father father6">
<div class="six_1">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="six_2">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="six_3">
<div class="son"></div>
<div class="son"></div>
</div>
</div>
</div>
</body>
</html>
css3的flex布局做骰子效果就實現啦，對你有幫助的話點個贊支持下哦~