一、骰子一面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>骰子一面Flex布局实现</title>
<style>
body{background-color: #666;}
.box{
width: 100px;
display: flex;
height: 100px;
margin: 10px auto;
padding: 5px;
border-radius: 10px;
box-sizing: border-box;
background-color: #fff;
}
.item{
width: 20px;
height: 20px;
border-radius: 10px;
margin: 5px;
background-color: #333;
}
</style>
</head>
<body>
<!-- 1点 -->
<div class="box" style="justify-content: center; align-items: center;">
<span class="item" style="width: 30px; height: 30px; border-radius: 15px;"></span>
</div>
<!-- 2点 -->
<div class="box" style="flex-wrap: wrap; justify-content: space-around; align-content: space-around;">
<div style="display: flex; flex-basis: 100%; justify-content: center;">
<span class="item" ></span>
</div>
<span class="item"></span>
</div>
<!-- 3点 -->
<div class="box" style="justify-content: space-between;">
<span class="item"></span>
<span class="item" style="align-self: center;"></span>
<span class="item" style="align-self: flex-end;"></span>
</div>
<!-- 4点 -->
<div class="box" style="flex-wrap: wrap; justify-content: space-around; align-content: space-around;">
<span class="item" style="margin: 10px;"></span>
<span class="item" style="margin: 10px;"></span>
<span class="item" style="margin: 10px;"></span>
<span class="item" style="margin: 10px;"></span>
</div>
<!-- 5点 -->
<div class="box" style="flex-wrap: wrap; justify-content: space-around; align-content: center;">
<span class="item" style="margin: 3px 5px;"></span>
<span class="item" style="margin: 3px 5px;"></span>
<div style="display:flex; flex-basis: 100%; justify-content: center;">
<span class="item" style="margin: 0px;"></span>
</div>
<span class="item" style="margin: 3px 5px;"></span>
<span class="item" style="margin: 3px 5px;"></span>
</div>
<!-- 6点 -->
<div class="box" style="justify-content: space-around; align-content: space-around; flex-wrap: wrap;">
<span class="item" style="margin: 5px 10px;"></span>
<span class="item" style="margin: 5px 10px;"></span>
<span class="item" style="margin: 5px 10px;"></span>
<span class="item" style="margin: 5px 10px;"></span>
<span class="item" style="margin: 5px 10px;"></span>
<span class="item" style="margin: 5px 10px;"></span>
</div>
</body>
</html>
二、圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex圣杯布局</title>
<style>
html,body{padding: 0;margin: 0;height: 100%;}
.box{
display: flex;
flex-direction:column;
height: 100%;
text-align: center;
}
.header{
height: 60px;
background-color: #666;
}
.body{
display: flex;
flex-grow: 1;
}
.content{
flex: 1; /* 占满剩下的空间*/
background-color: grey;
}
.left{
flex: 0 1 15%;
order: -1; /* 放最左边 */
background-color: blue;
}
.right{
flex: 0 1 15%;
background-color: orange;
}
.footer{
height: 60px;
background-color: #666;
}
</style>
</head>
<body>
<div class='box'>
<header class="header">
header
</header>
<div class="body">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
