南寧小程序開發：www.zkelm.com
骰子佈局 4 5 6 三個點數的佈局，要是使用到縱向佈局的思路。所以用獨立一個文章來做介紹。更方便大家理解已學習
1.先幹6個骰子的排版
<div class="flexcontainer">
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
</div>
</div>
爲了更清楚的看到flexcolumn的排序，我加了一個邊框
.flexcolumn{
border：1px solid #f55；
}
默認排版如圖：
默認 flexcolumn 是的 默認排版 flex-directive:row
現在加入屬性 把 他們 column 排布
.flexcontainer{
display:flex;
width:80px;
height:80px;
border:1px solid #ddd;
border-radius:8px;
background:#ddd;
box-shadow:2px 2px 3px #888;
flex-direction: column;
}
顯示如下：他們開始往下排布，
ok！ 現在讓 column 的元素 row 排布， 只需要給他定義display：flex 即可
接下來，我們只需要把 column元素 撐開， 方法就是在
.flexcontainer{
justify-content：space-between
}
效果：
去掉 紅邊：
4個點的 ：簡單 直接去掉兩個 flexitems元素即可，然後添加 justify-content：space-between；
完整代碼如下
<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;
flex-direction: column;
justify-content: space-between;
}
.flexitems{
margin:3px;
width:20px;
height:20px;
background:#000;
border-radius:50%;
}
.flexcolumn{
display:flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="box">
<div class="flexcontainer">
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
</div>
</div>
</body>
運行如下：
對於5個點的怎麼操作呢？ 就是用三個column即可
html代碼如下
<div class="box">
<div class="flexcontainer">
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
<div class="flexcolumn">
<div class="flexitems"></div>
</div>
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
</div>
</div>
運行結果如下：
接下來就是：把中間的點居中
.flexcolumn:nth-child(2){
justify-content:center;
}
運行結果如下：
好咧，接下來的話，下一章，準備讓這個骰子動起來！希望大家支持一下我的公司。我們幾個程序員一起創業，創業不容易，有好項目歡迎大家一起交流
廣西小程序開發：www.zkelm.com