.wrap{
width: 600px;
height: 400px;
background-color: aquamarine;
display: flex;
flex-direction:row ;
/* 弹性子元素在侧轴上的对齐方式 */
align-items: flex-start;/* 默认值:子元素在侧轴的顶端对齐 */
align-items: flex-end;/* 子元素在侧轴的默端对齐 */
align-items: center;/* 子元素在侧轴的中间对齐 */
align-items: baseline;/* 子元素在第一行文字的基线对齐 */
align-items: stretch;/* 默认值(如果子元素没有高度的时候):如果弹性子元素没有高度或者高度为auto、将占满整个容器的高度 */
}
.wrap div{
width: 100px;
height: 100px;
}
.wrap div:nth-child(1){
background-color: aqua;
}
.wrap div:nth-child(2){
background-color: rgb(52, 68, 68);
}
.wrap div:nth-child(3){
background-color: rgb(50, 214, 50);
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div></div>
<div></div>
</div>
</body>