在 HTML 中使用 Flexbox 布局非常简单，只需要在父元素上设置 display: flex; 即可开启 Flexbox 布局模式。以下是步骤：
.container {
display: flex;
}flex-direction 定义主轴的方向，可设置为 row（默认值，水平方向）、row-reverse（水平方向，从右到左）、column（竖直方向）或 column-reverse（竖直方向，从下到上）。justify-content 定义主轴上的对齐方式，可设置为 flex-start（靠左对齐）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等）或 space-evenly（每个项目的间隔相等）。例如：
.container {
display: flex;
flex-direction: row;
justify-content: center;
}order 属性，数值越小越靠前，默认为 0。例如：
.item {
order: 1;
}flex-grow 属性，值为一个非负数，表示当前项目的放大比例。默认为 0，即如果存在剩余空间，也不放大。例如：
.item {
flex-grow: 1;
}以上是使用 Flexbox 布局的基本步骤和常用属性，可以根据具体需求进行调整。