align-items属性用于调整flex容器中的项目在交叉轴上的对齐方式,而justify-content属性用于调整flex容器中的项目在主轴上的对齐方式。它们的功能是不同的。
如果希望同时使用align-items和justify-content属性来对齐flex容器中的项目,可以使用以下代码示例来解决问题:
HTML代码:
Item 1
Item 2
Item 3
CSS代码:
.container {
display: flex;
align-items: center; /* 在交叉轴上居中对齐 */
justify-content: space-between; /* 在主轴上均匀分布对齐 */
height: 200px;
background-color: lightgray;
}
.item {
width: 100px;
height: 100px;
background-color: coral;
}
在上述代码中,容器使用display: flex;来创建一个flex容器。align-items属性设置为center,使得项目在交叉轴上居中对齐。justify-content属性设置为space-between,使得项目在主轴上均匀分布对齐。
这样,项目将在交叉轴上居中对齐,并且在主轴上均匀分布对齐。
希望这个示例能够解决你的问题。