代码:
.box {display: flex;
}
#box1 {align-items: center;justify-content: center;
}#box2 {justify-content: space-between;
}
#box2 .item:nth-child(2) {align-self: end;
}#box3 {justify-content: space-between;
}
#box3 .item:nth-child(2) {align-self: center;
}
#box3 .item:nth-child(3) {align-self: end;
}
知识点:
1.flex布局
align-self控制子项自己在侧轴的排列方式(单个) //写在子元素里
2.:nth-child(n)
<span>
<div>1</div>
<div>2</div>
</span>
div:nth-child(n) //返回div父元素(span)下第n个div元素, !!而不是div的子元素