主要是对flex的运用
使用 display: flex; justify-content: space-between;
以及对其中单个子元素进行操作:align-self: center; align-self: end;
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 960px;
margin: 0 auto;
}
.item {
display: block;
width: 66px;
height: 66px;
}
.item img {
width: 100%;
height: auto;
}
[class$="box"] {
width: 204px;
height: 204px;
margin: 20px;
background-image: linear-gradient(
rgb(252, 213, 136) 33.3%,
#fff493 0,
#fdf45d 66.6%,
#f8da47 0
);
background-size: 6px 6px;
}
/* TODO:待补充代码 */
[class$="box"]:nth-child(1){
display: flex;
justify-content: center;
align-items: center;
}
[class$="box"]:nth-child(2){
display: flex;
justify-content: space-between;
}
[class$="box"]:nth-child(2) span:nth-child(2){
align-self: end;
}
[class$="box"]:nth-child(3){
display: flex;
justify-content: space-between;
}
[class$="box"]:nth-child(3) span:nth-child(2){
align-self: center;
}
[class$="box"]:nth-child(3) span:nth-child(3){
align-self: end;
}