骰子的佈局（flex）
骰子的佈局（一個點）
css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>骰子的佈局（flex）</title>
<style type="text/css">
body{margin: 0}
.m-container{margin: 5px; padding: 5px; width:100px;height: 100px;border:1px solid green;}
.m-item {margin: 5px; width: 20px;height: 20px;border-radius: 10px;background-color: black;}
.box1 {display: flex;justify-content: center;} /*水平居中*/
.box2 {display: flex;justify-content: flex-end;} /*水平靠右*/
.box3 {display: flex;align-items: center;} /*垂直居中*/
.box4 {display: flex;justify-content: center;align-items: center;} /*水平垂直居中*/
.box5 {display: flex;justify-content: center;align-items: flex-end;} /*水平居中，垂直靠下*/
</style>
</head>
<body>
<div class="m-container box1">
<span class="m-item"></span>
</div>
<div class="m-container box2">
<span class="m-item"></span>
</div>
<div class="m-container box3">
<span class="m-item"></span>
</div>
<div class="m-container box4">
<span class="m-item"></span>
</div>
<div class="m-container box5">
<span class="m-item"></span>
</div>
</body>
</html>
骰子的佈局（兩個點）
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>骰子的佈局（flex）</title>
<style type="text/css">
body{margin: 0}
.m-container{margin: 5px; padding: 5px; width:100px;height: 100px;border:1px solid green;}
.m-item {margin: 5px; width: 20px;height: 20px;border-radius: 10px;background-color: black;}
.box1 {display: flex;justify-content: space-between;} /*底部兩端對齊*/
.box2 {display: flex;flex-direction: column; justify-content: space-between;} /*靠左兩端對齊*/
.box3 {display: flex;flex-direction: column; justify-content: space-between;align-items: center;} /*水平居中，兩端對齊*/
.box4 {display: flex;flex-direction: column; justify-content: space-between;align-items: flex-end;} /*水平靠右，兩端對齊*/
.box5 {display: flex;}
.box5 .m-item:nth-child(2) {align-self: center;}
.box6 {display: flex;justify-content: space-between;}
.box6 .m-item:nth-child(2) {align-self: flex-end;}
</style>
</head>
<body>
<div class="m-container box1">
<span class="m-item"></span>
<span class="m-item"></span>
</div>
<div class="m-container box2">
<span class="m-item"></span>
<span class="m-item"></span>
</div>
<div class="m-container box3">
<span class="m-item"></span>
<span class="m-item"></span>
</div>
<div class="m-container box4">
<span class="m-item"></span>
<span class="m-item"></span>
</div>
<div class="m-container box5">
<span class="m-item"></span>
<span class="m-item"></span>
</div>
<div class="m-container box6">
<span class="m-item"></span>
<span class="m-item"></span>
</div>
</body>
</html>
備註：歡迎加入web前端求職招聘qq羣：668352707
前端
相關文章
- 1. flex佈局案例（骰子）
- 2. Flex佈局實戰（一）：骰子
- 3. flex佈局之骰子案例
- 4. display:flex 佈局之 骰子
- 5. css3 flex佈局結合transform生成一個3D骰子
- 6. grid網格佈局之骰子案例
- 7. flex彈性盒子佈局
- 8. 佈局:伸縮盒子flex(display: flex justify-content flex-flow flex-direction)
- 9. Css3的Flex佈局
- 10. css3的flex佈局
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • 常用的分佈式事務解決方案
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
