1.flex内容详解
请移步致张鑫旭大牛的博客:flex布局
重点是要明白
- flex布局由容器和子项构成
- 作用在容器和子项上分别有不同的属性,了解每个属性的含义
2.利用flex布局实现骰子效果
- 效果图如下:
附上源码:
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.item {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
margin: 4px;
background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
.box {
margin: 16px;
padding: 4px;
width: 104px;
height: 104px;
object-fit: contain;
background-color: #e7e7e7;
border-radius: 10px;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
}
h3 {
margin-left: 20px;
}
.onepic {
width: 1500px;
flex-wrap: wrap;
display: flex
}
.box2 {
display: flex;
justify-content: center;
}
.box3 {
display: flex;
justify-content: flex-end;
}
.box4 {
display: flex;
justify-content: center;
align-items: center;
}
.box5 {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.box6 {
display: flex;
justify-content: space-between;
}
.box7 {
display: flex;