在CSS中，flexbox布局中的主轴和交叉轴是指flex容器中的两个方向。默认情况下，主轴是水平方向，交叉轴是垂直方向。
当使用flexbox布局时，可以通过设置align-items属性来控制flex容器中的所有子元素在交叉轴上的对齐方式。align-items属性可以取以下值：
stretch：默认值，子元素会被拉伸以填满flex容器的高度。
flex-start：子元素在交叉轴的起始位置对齐。
flex-end：子元素在交叉轴的末尾位置对齐。
center：子元素在交叉轴的中心位置对齐。
baseline：子元素以它们的基线对齐。
如果你希望将flex容器本身在交叉轴上进行对齐，则可以使用align-items属性的相似属性align-self。这个属性可以设置单个flex元素在交叉轴上的对齐方式。
例如，如果你想让flex容器在交叉轴上居中对齐，你可以添加以下样式：
.parent{
display:flex;
align-items:center;/*将子元素在交叉轴上居中对齐*/
align-self:center;/*将父元素在交叉轴上居中对齐*/
}
除了使用align-items和align-self属性来控制flex容器和单个子元素在交叉轴上的对齐方式之外，还可以使用justify-content属性来控制flex容器中所有子元素在主轴上的对齐方式。
justify-content属性可以取以下值：
flex-start：子元素在主轴的起始位置对齐。
flex-end：子元素在主轴的末尾位置对齐。
center：子元素在主轴的中心位置对齐。
space-between：子元素平均分配在主轴上，两端没有间隔。
space-around：子元素平均分配在主轴上，两端有间隔。
space-evenly：子元素平均分配在主轴上，包括两端。
下面是一个例子，展示了如何在flex容器中使用这些属性进行对齐：
.parent{
display:flex;
justify-content:center;/*将子元素在主轴上居中对齐*/
align-items:center;/*将子元素在交叉轴上居中对齐*/
height:300px;
}
.child{
width:100px;
height:100px;
}
在上面的例子中，parent是一个flex容器，它通过justify-content属性将所有子元素在主轴上居中对齐，而通过align-items属性将它们在交叉轴上居中对齐。child是一个子元素，它将根据父元素的对齐方式进行对齐。这里parent容器的高度被设置为300像素，而子元素的宽度和高度都是100像素。