web蓝桥杯真题：新鲜的蔬菜

 代码：

.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的子元素