在使用CSS属性display:flex进行布局时，Flex容器的主轴和侧轴是非常重要的概念。它们用于定义Flex项（Flexitem）在容器中的排列方式。
主轴（mainaxis）是Flex容器的主要方向，通常是横向的。Flex项默认沿主轴排列。在CSS中，可以使用flex-direction属性来设置Flex容器的主轴方向，可以设置为row（默认值，水平方向）、column（垂直方向）、row-reverse（水平方向，从右到左排列）或column-reverse（垂直方向，从下到上排列）。
侧轴（crossaxis）是与主轴垂直的方向，通常是纵向的。在默认情况下，Flex项沿着侧轴居中对齐。在CSS中，可以使用justify-content属性来设置Flex项在主轴上的对齐方式，可以设置为flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等）或space-evenly（每个项目两侧和项目之间的间隔相等）。
同时，可以使用align-items属性来设置Flex项在侧轴上的对齐方式，可以设置为flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（以第一行文字的基线对齐）或stretch（拉伸对齐，使项目占满整个侧轴空间）。
除了justify-content和align-items，还有一些其他的Flex属性可以影响Flex项在主轴和侧轴上的布局，包括：
flex-wrap：用于设置Flex项是否允许换行，默认值为nowrap，不允许换行。
align-content：用于设置多行Flex项在侧轴上的对齐方式，只有在多行情况下才有效果。
flex-grow：用于设置Flex项在主轴上的增长比例。
flex-shrink：用于设置Flex项在主轴上的收缩比例。
flex-basis：用于设置Flex项在主轴上的基础宽度。
这些属性的使用可以根据具体的布局需求进行灵活的调整，以达到所需的效果。同时，需要注意的是，Flex布局虽然在排版上比传统的布局方式更加灵活，但也需要注意一些兼容性问题，以确保在不同浏览器下的兼容性。