1、flex更换主轴
在CSS中，使用flexbox布局可以轻松更改主轴的方向。主轴是指项目（flexitem）排列的方向。默认情况下，主轴是水平方向（即从左到右），而交叉轴是垂直方向（即从上到下）。
如果您想更改主轴方向，可以使用flex-direction属性。该属性可以接受以下值：
row：默认值，主轴为水平方向。
row-reverse：主轴为水平方向，但排列顺序与默认顺序相反。
column：主轴为垂直方向。
column-reverse：主轴为垂直方向，但排列顺序与默认顺序相反。
例如，要将主轴方向更改为垂直方向，可以将以下代码添加到CSS样式表中：
.container{
display:flex;
flex-direction:column;
}
这将使项目在垂直方向上排列，而不是水平方向。请注意，这只会影响主轴方向，而不是交叉轴方向。如果要更改交叉轴方向，请使用justify-content和align-items属性。
2、flex主轴
在CSSFlexbox布局中，主轴是指Flex容器中用于排列Flex项目的方向。主轴通常是水平的（从左到右），但可以通过指定flex-direction属性来更改为垂直方向（从上到下）。
主轴的方向是指Flex项目如何沿着Flex容器的主轴排列。例如，在默认情况下，Flex容器的主轴是水平方向，因此Flex项目从左到右排列。但是，如果将flex-direction属性设置为column，则Flex容器的主轴方向将变为垂直方向，Flex项目将从上到下排列。
在Flexbox布局中，通常使用以下属性控制Flex项目在主轴上的排列：
justify-content：控制Flex项目在主轴上的对齐方式。例如，可以使用justify-content:center将Flex项目在主轴上居中对齐。
flex-wrap：确定Flex项目是否应该换行。默认情况下，Flex项目会在一行上排列，但如果一行无法容纳所有Flex项目，则可以使用flex-wrap:wrap将它们分成多行。
flex-flow：是flex-direction和flex-wrap属性的缩写，用于同时设置它们两个。
通过使用这些属性，可以轻松地控制Flex项目在主轴上的排列方式。
3、flex换轴
在CSSFlexbox布局中，换轴（又称为交叉轴）是指与主轴垂直的轴。Flexbox布局中有两个轴：主轴和交叉轴，它们共同构成了Flex容器中的坐标系。
默认情况下，交叉轴与主轴垂直，因此交叉轴的方向与主轴方向不同。例如，当主轴方向为水平时，交叉轴方向为垂直。
要在Flexbox布局中更改交叉轴方向，可以使用flex-direction属性。该属性控制Flex容器中的主轴方向，可以将其设置为row（水平方向）或column（垂直方向）。例如，如果将flex-direction属性设置为column，则Flex容器的主轴方向将变为垂直方向，并且交叉轴方向将变为水平方向。
在Flexbox布局中，可以使用以下属性来控制Flex项目在交叉轴上的排列：
align-items：控制Flex项目在交叉轴上的对齐方式。例如，可以使用align-items:center将Flex项目在交叉轴上居中对齐。
align-content：控制Flex项目在交叉轴上的对齐方式，当Flex容器有多行时使用。例如，可以使用align-content:center将多行Flex项目在交叉轴上居中对齐。
flex-wrap：确定Flex项目是否应该换行。默认情况下，Flex项目会在一行上排列，但如果一行无法容纳所有Flex项目，则可以使用flex-wrap:wrap将它们分成多行。
通过使用这些属性，可以轻松地控制Flex项目在交叉轴上的排列方式。
4、flex侧轴
在弹性布局中，主轴和侧轴是相对的概念。主轴方向是弹性容器中子元素排列的主要方向，侧轴方向则是与主轴垂直的方向。在默认情况下，侧轴的方向是与主轴方向相反的垂直方向。
侧轴的方向可以通过flex-direction属性来改变主轴方向，从而改变侧轴的方向。在改变了主轴方向后，justify-content和align-items属性的取值也会发生变化，因为它们分别控制子元素在主轴和侧轴方向上的对齐方式。
例如，以下样式将主轴方向设置为垂直方向，即从上到下排列，并将子元素在侧轴方向上居中对齐：
.container{
display:flex;
flex-direction:column;
justify-content:center;/*在侧轴方向上居中对齐*/
align-items:center;/*在主轴方向上居中对齐*/
}
这将使得容器中的子元素在侧轴方向上居中，主轴方向上居中对齐。
类似地，以下样式将主轴方向设置为水平方向，即从左到右排列，并将子元素在侧轴方向上居中对齐：
.container{
display:flex;
flex-direction:row;
justify-content:center;/*在主轴方向上居中对齐*/
align-items:center;/*在侧轴方向上居中对齐*/
}
这将使得容器中的子元素在侧轴方向上居中，主轴方向上居中对齐。
需要注意的是，如果子元素在侧轴方向上的高度大于容器的高度，且没有设置flex-shrink属性为0，则子元素的高度会被自动缩小以适应容器的高度。如果需要避免这种情况，可以将align-items属性的取值设置为flex-start，这样子元素会在侧轴方向上顶部对齐，不会自动缩小高度。