一、什么是flex?
Flex是CSS3中新增加的一种布局方式，可以实现页面中元素的灵活布局。通过设置容器（父元素）的属性，子元素就可以根据容器的大小和布局方式自适应排列。Flex布局具有容器和项目两个重要的属性。容器的属性决定项目的排列方式，而项目的属性则决定项目的大小和位置等。
二、什么是主轴和交叉轴？
在Flex布局中，主轴和交叉轴是非常重要的概念。主轴和交叉轴的概念可以通过设置flex-direction属性来确定，它决定了Flex容器中的主轴方向和交叉轴方向。flex-direction有四个值：row、row-reverse、column、column-reverse。
当flex-direction为row或者row-reverse时，主轴是水平方向，交叉轴是垂直方向；当flex-direction为column或者column-reverse时，主轴是垂直方向，交叉轴是水平方向。
三、什么是Flex改变主轴方向？
在Flex布局中，可以通过flex-direction属性来改变主轴的方向。通常，flex-direction的默认值是row，即主轴方向为水平方向。但是，当需要将Flex容器中的主轴方向改为垂直方向时，可以将flex-direction设置为column。
通过这种方式，可以实现垂直方向的布局，从而更加灵活地设计页面。但是，当改变主轴方向之后，可能会出现背景不自动铺满的问题。
四、为什么背景不自动铺满？
在Flex布局中，当将主轴方向改变为垂直方向时，如果容器的高度没有设置，那么默认情况下容器的高度会根据内容自适应。这种情况下，如果容器中的项目没有填满容器的高度，那么背景就不会自动铺满整个容器，而只会铺满容器中实际有内容的部分。
因此，如果需要让背景自动铺满整个容器，需要设置容器的高度。可以将容器的高度设置为100%或者具体的像素值，这样就可以让背景自动铺满整个容器。
（1）设置容器高度为100%
.container{
display:flex;
flex-direction:column;
height:100%;
background:#ccc;
}
（2）设置容器高度为具体的像素值
.container{
display:flex;
flex-direction:column;
height:500px;
background:#ccc;
}
通过以上两种方式设置容器的高度，就可以解决背景不自动铺满的问题五、Flex中的其他注意事项
除了背景不自动铺满的问题，使用Flex布局还需要注意以下几点：
（1）默认情况下，Flex容器中的项目是不会换行的，即使项目的宽度超出了容器的宽度，也会被压缩显示。如果想要让项目自动换行，可以设置flex-wrap属性为wrap。
（2）Flex容器中的项目具有弹性特性，可以通过设置项目的flex属性来控制项目的宽度。具体来说，flex属性有三个值：flex-grow、flex-shrink和flex-basis。flex-grow表示项目的放大比例，flex-shrink表示项目的缩小比例，flex-basis表示项目的基准大小。
（3）Flex容器中的项目也可以通过设置order属性来控制项目的顺序。默认情况下，项目的顺序是按照它们在HTML中的顺序排列的。但是，通过设置order属性，可以改变项目的顺序。
六、总结
Flex布局是一种非常灵活的页面布局方式，可以实现各种复杂的布局效果。但是，在使用Flex布局时，需要注意容器和项目的属性，以及主轴和交叉轴的方向。如果出现背景不自动铺满的问题，可以通过设置容器的高度来解决。除此之外，还需要注意Flex容器中项目的换行、弹性特性和顺序等问题。通过深入了解和掌握Flex布局的相关知识，可以更加轻松地实现页面的布局和设计。