flex布局

一些基本的属性：

1. • display: 定义容器为 Flex 容器，可以设置为?flex?或?inline-flex。
   • flex-direction: 定义主轴的方向（row、row-reverse、column、column-reverse）。
   • flex-wrap: 控制项目换行的方式（nowrap、wrap、wrap-reverse）。
   • justify-content: 定义项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）。
   • align-items: 定义项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。
   • align-content: 定义多根轴线的对齐方式（flex-start、flex-end、center、space-between、space-around、stretch）。
   • order: 定义项目的排列顺序。
   • flex-grow: 定义项目的放大比例。
   • flex-shrink: 定义项目的缩小比例。
   • flex-basis: 定义项目占据主轴空间的大小。
   • flex: 简写属性，包括?flex-grow、flex-shrink?和?flex-basis。
   • align-self: 单独定义某个项目在交叉轴上的对齐方式。

2.

• 主轴（Main Axis）：Flex 容器的主要方向，项目默认沿着主轴排列。
• 交叉轴（Cross Axis）：与主轴垂直的方向。
• justify-content: space-between;使得子元素在主轴上均匀分布，align-items: center;使得子元素在交叉轴上居中对齐。
• 它使得在一个容器内的子元素能够以弹性的方式布局，从而实现灵活的布局。

?