在flex布局中，可以使用justify-content属性来控制水平方向上的对齐方式。以下是justify-content属性的几个取值及其效果：
flex-start:左对齐（默认值）
center:居中对齐
flex-end:右对齐
space-between:两端对齐，项目之间的间隔相等
space-around:每个项目两侧的间隔相等，项目之间的间隔也相等
space-evenly:项目之间的间隔相等，包括首尾项目与容器之间的间隔
例如，以下代码将3个子元素在水平方向上居中对齐：
.container{
display:flex;
justify-content:center;
}
.item{
width:100px;
height:100px;
}
更多关于flex布局的内容可以查看MDN的文档：Flexbox
除了justify-content属性外，还可以使用align-items属性来控制垂直方向上的对齐方式。以下是align-items属性的几个取值及其效果：
flex-start:顶部对齐
center:居中对齐
flex-end:底部对齐
stretch:默认值，将项目拉伸以适应容器高度
baseline:基线对齐
例如，以下代码将3个子元素在水平和垂直方向上居中对齐：
.container{
display:flex;
justify-content:center;
align-items:center;
}
.item{
width:100px;
height:100px;
}
需要注意的是，justify-content属性是控制主轴方向上的对齐方式，而align-items属性是控制交叉轴方向上的对齐方式，具体是哪个轴取决于flex-direction属性的值。如果flex-direction:row，则主轴是水平方向，交叉轴是垂直方向；如果flex-direction:column，则主轴是垂直方向，交叉轴是水平方向。