使用Flex布局可轻松实现HTML元素横向排列。1. 设置父容器display: flex，子元素自动从左到右水平排列；2. 通过justify-content控制主轴对齐（如center、space-between），align-items实现垂直居中；3. 使用flex-direction: row-reverse实现从右到左排列；4. 用flex-wrap控制换行，wrap允许换行，nowrap禁止换行，结合justify-content可实现多行对齐。Flex布局灵活高效，掌握核心属性即可满足多数横向排列需求。
要实现HTML页面的横向排列，使用Flex布局是最简单高效的方法。只需要在父容器上启用display: flex，子元素就会默认横向排列。
1. 基本横向排列（水平排列）
给父容器设置display: flex，子元素会自动从左到右横向排列。
<div class="container"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div>
.container {
display: flex;
}
.item {
padding: 10px;
background-color: #eee;
margin: 5px;
}
2. 控制对齐方式
通过justify-content和align-items可以控制主轴和交叉轴上的对齐。
-
居中对齐：
justify-content: center; -
两端对齐：
justify-content: space-between; -
等间距分布：
justify-content: space-around; -
垂直居中：
align-items: center;
3. 反向横向排列
如果想让子元素从右到左排列，可以使用flex-direction: row-reverse。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: row-reverse;
}
4. 子元素换行与不换行
默认情况下，子元素不会换行。如果内容过宽需要换行，可设置：
-
允许换行：
flex-wrap: wrap; -
禁止换行：
flex-wrap: nowrap;（默认） -
多行居中： 使用
justify-content控制每行对齐
基本上就这些。Flex布局灵活且兼容性好，适合大多数横向排列需求。关键是掌握父容器的display: flex和相关属性组合使用。不复杂但容易忽略细节。
