flexbox

容器（Flex Container）：

应用 display: flex 或 display: inline-flex 的元素，其子元素成为 Flex 项目。

项目（Flex Items）

Flex 容器内的直接子元素。

Flex 容器的属性

• display：定义容器为 Flex 容器。
• flex-direction：定义主轴的方向。
• flex-wrap：定义是否换行。
• flex-flow：flex-direction 和 flex-wrap 简写属性，同时设置主轴方向和是否换行。
• justify-content：定义主轴对齐方式。
• align-items：定义交叉轴对齐方式。
• align-content：定义多根轴线的对齐方式。

Flex 项目的属性

• order：定义项目的排列顺序。
• flex-grow：定义项目的放大比例。
• flex-shrink：定义项目的缩小比例。
• flex-basis：定义项目的初始大小。
• flex：flex-grow, flex-shrink, flex-basis 简写属性。
• align-self：定义单个项目的对齐方式。

Flexbox 的常见用例

水平居中

.container {
    display: flex;
    justify-content: center;
}

垂直居中

.container {
    display: flex;
    align-items: center;
}

两端对齐

.container {
    display: flex;
    justify-content: space-between;
}

等距排列

.container {
    display: flex;
    justify-content: space-around;
}

响应式布局

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 200px; /* 每个项目至少 200px 宽，可以伸缩 */
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}