flex佈局示例:骰子的製作
阿新 • • 發佈:2019-01-07
html程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex 佈局</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <!-- 一點 --> <div class="dice dice1"> <div class="dice-son"></div> </div> <!-- 兩點 --> <div class="dice dice2"> <div class="dice-son "></div> <div class="dice-son "></div> </div> <!-- 三點 --> <div class="dice dice3"> <div class=" iteams iteams3"> <div class="dice-son dice-son1"></div> <div class="dice-son dice-son2"></div> <div class="dice-son dice-son3"></div> </div> </div> <!-- 四點 --> <div class="dice dice4"> <div class=" iteams items1"> <div class="dice-son "></div> <div class="dice-son"></div> </div> <div class="iteams items2"> <div class="dice-son "></div> <div class="dice-son "></div> </div> </div> <!-- 五點 :四點和一點的結合--> <div class="dice dice5"> <div class=" iteams items1"> <div class="dice-son dice-son1"></div> <div class="dice-son dice-son2"></div> </div> <div class="dice dice1"> <div class="dice-son"></div> </div> <div class="iteams items2"> <div class="dice-son dice-son3"></div> <div class="dice-son dice-son4"></div> </div> </div> <!-- 六點:四點的結合 --> <div class="dice dice6"> <div class=" iteams items1"> <div class="dice-son dice-son1"></div> <div class="dice-son dice-son2"></div> </div> <div class="iteams items1"> <div class="dice-son dice-son1"></div> <div class="dice-son dice-son2"></div> </div> <div class="iteams items2"> <div class="dice-son dice-son3"></div> <div class="dice-son dice-son4"></div> </div> </div> </div> </div> </body> </html>
css樣式程式碼: *{ margin: 0; padding: 0; } html{ font-size: 100px; } body{ font-size: 0.16rem; display: flex; justify-content: center; } .container{ width: 4.5rem; height: 4.5rem; background: #ccc; display: flex; justify-content: space-around; flex-wrap: wrap; } /* 給骰子最外層包裹一個div */ .dice{ width: 1rem; height: 1rem; background: #fff; border-radius: 0.2rem; display: flex; align-items: center; justify-content: center; /* margin: 0.5rem; */ } /* 因為骰子四周有一個邊距,這裡我們給骰子巢狀一個div,將篩子裡面的小圓寫在巢狀的div裡面,方便定位 */ .iteams{ width: 0.8rem; height: 0.8rem; display: flex; } /* 篩子的內點樣式 */ .dice-son{ width: 0.25rem; height: 0.25rem; border-radius: 0.125rem; background: #000; } /* 一點 */ .dice1{ align-items: center; justify-content: center; }
效果
/* 兩點 */
.dice2{
align-items: center;
justify-content: space-around;
}
兩點效果
/*三點*/
.iteams3{
align-items: center;
justify-content: space-between
}
.dice3 .iteams3 .dice-son1{
align-self: flex-start;
}
.dice3 .iteams3 .dice-son3{
align-self: flex-end;
}
三點效果
/* 四點 */ .dice4{ justify-content: space-between; } .items1{ flex-basis: 100%; flex-direction: column; justify-content: space-between; align-items: center; } .items2{ width: 0.8rem; height: 0.8rem; display: flex; flex-basis: 100%; flex-direction: column; justify-content: space-between; align-items: center; }
四點效果
五點和六點我是直接在四點和一點的基礎上做的,原理一樣,不再闡述。