CSS Flex属性
CSS Flex属性是一种弹性布局，它可以让元素在父元素中自动排列，并且可以按照比例调整元素的大小和位置。
Flex容器
要使用Flex属性，要设置一个Flex容器，它可以是任何元素，比如div，span，ul等。要设置一个Flex容器，需要添加display: flex属性，这样就可以将其子元素设置为Flex项目。
Flex项目
Flex项目是Flex容器中的各个元素，它们可以按照比例调整大小和位置。要设置Flex项目的大小和位置，可以使用以下几个属性：
- flex-grow：设置Flex项目的大小，可以指定一个数字，表示比例；
- flex-shrink：设置Flex项目缩小时的比例；
- flex-basis：设置Flex项目的基本大小；
- order：设置Flex项目的排列顺序；
- align-self：设置Flex项目的位置，可以指定start，end，center，stretch等值。
示例代码
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
order: 0;
align-self: auto;
}
上面的代码定义了一个Flex容器，并设置了Flex项目的大小和位置。
CSS Flex属性可以让元素在父元素中自动排列，并且可以按照比例调整元素的大小和位置，这样可以让页面更加灵活，更加美观。