0
点赞
收藏
分享

微信扫一扫

骰子的布局(flex)

骰子的布局(一个点)

<!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>

骰子的布局(flex)_两端对齐

骰子的布局(两个点)

<!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>

骰子的布局(flex)_flex_02




举报

相关推荐

0 条评论