蓝桥杯（Web大学组）2022国赛真题：新鲜的蔬菜

本文主要是介绍蓝桥杯（Web大学组）2022国赛真题：新鲜的蔬菜，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

主要是对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;
}

这篇关于蓝桥杯（Web大学组）2022国赛真题：新鲜的蔬菜的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---