Flex 容器与项目

Flexbox（弹性盒子）是一种一维布局模型，能够轻松实现元素的对齐、分布和顺序控制。

1. Flex 容器

通过给父元素设置 display: flex; 或 display: inline-flex;，将其变为弹性容器。

css

display: flex;

常用容器属性

flex-direction: 定义主轴方向（row、column、row-reverse、column-reverse）。
justify-content: 沿主轴对齐方式（flex-start、center、space-between 等）。
align-items: 沿侧轴对齐方式（flex-start、center、stretch 等）。
flex-wrap: 是否换行（nowrap、wrap、wrap-reverse）。

2. Flex 项目

弹性容器内的直接子元素称为弹性项目，可以单独设置：

flex-grow: 放大比例，默认 0。
flex-shrink: 缩小比例，默认 1。
flex-basis: 初始大小，默认 auto。
order: 控制显示顺序，默认 0。
align-self: 单个项目的侧轴对齐方式，覆盖容器的 align-items。

Flex 容器与项目示例

loading