生無可戀只想學編程 南寧小程序開發 www.zkelm.com
flex佈局骰子教程源碼，我也是根據網上寫的教程，鞏固使用經驗，廢話不多數 開幹Doing
1.首先先製作一個骰子的模板 代碼如下
<body>
<head>
<title>骰子-一點佈局居中</title>
<style>
body{background:#000;}
.box{
display:flex;
width:90px;
height:90px;
border:1px solid #fff;
background:#bbb;
border-radius:10px;
justify-content:center;
align-items:center;
}
.flexcontainer{
display:flex;
width:80px;
height:80px;
border:1px solid #ddd;
border-radius:8px;
background:#ddd;
box-shadow:2px 2px 3px #888;
justify-content:center;
align-items:center;
}
.flexitems{
margin:5px;
width:20px;
height:20px;
background:#000;
border-radius:50%;
}
</style>
</head>
<body>
<div class="box">
<div class="flexcontainer">
<div class="flexitems"></div>
</div>
</div>
</body>
運行結果：
兩個點的時候怎麼排布呢？ 思路大致如下：
1.左上角 2.右下角 3.中間是space-between
1.先加入兩個 flexitems 黑色骰子在裏面
<div class="flexcontainer">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
運行結果如下：
2.設置他們的橫向分佈爲：justify-content:space-between
justify-content:space-between;
這樣子間距就會拉開
選擇第二個骰子 .flexitems：nth-child(2) 設置屬性爲 align-self：flex-end 把第二個骰子的縱向放在end位置即可
.flexitems:nth-child(2){
align-self:flex-end;
}
運行結果：
同理：三個骰子的時候 怎麼佈局呢：
只需要設置第二個黑點在中間即可： align-self:center;
完整代碼如下：
<body>
<head>
<title>骰子-一點佈局居中</title>
<style>
body{background:#000;}
.box{
display:flex;
width:90px;
height:90px;
border:1px solid #fff;
background:#bbb;
border-radius:10px;
justify-content:center;
align-items:center;
}
.flexcontainer{
display:flex;
width:80px;
height:80px;
border:1px solid #ddd;
border-radius:8px;
background:#ddd;
box-shadow:2px 2px 3px #888;
justify-content:space-between;
}
.flexitems{
margin:3px;
width:20px;
height:20px;
background:#000;
border-radius:50%;
}
.flexitems:nth-child(2){
align-self:center;
}
.flexitems:nth-child(3){
align-self:flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="flexcontainer">
<div class="flexitems"></div>
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
</div>
</body>
運行結果：
