使用display: flex后，通过flex-direction设置主轴方向，justify-content控制主轴对齐，align-items定义交叉轴对齐，flex-wrap实现换行，结合align-content处理多行布局，可灵活排列子元素。
在CSS中使用Flexbox布局时，控制子元素的排列主要依赖于父容器的 display: flex 和相关属性设置。下面介绍如何灵活地排列flex子元素。
1. 设置主轴方向（flex-direction）
flex容器默认沿水平方向排列子元素，可通过 flex-direction 修改主轴方向：
- row：从左到右水平排列（默认）
- row-reverse：从右到左水平排列
- column：从上到下垂直排列
- column-reverse：从下到上垂直排列
示例：
flex-container {
display: flex;
flex-direction: row; /* 可改为 column 等 */
}2. 控制主轴对齐方式（justify-content）
该属性定义子元素在主轴上的对齐方式：
立即学习“前端免费学习笔记（深入）”；
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
- flex-start：靠主轴起点对齐
- flex-end：靠主轴终点对齐
- center：居中对齐
- space-between：两端对齐，中间间距相等
- space-around：每个项目两侧间距相等
- space-evenly：所有间距完全相等
3. 控制交叉轴对齐方式（align-items）
控制子元素在交叉轴（垂直于主轴）上的对齐：
- flex-start：顶部对齐
- flex-end：底部对齐
- center：居中对齐
- baseline：文字基线对齐
- stretch：拉伸填满容器（默认值，前提无固定高度）
4. 多行排列与换行控制（flex-wrap 和 align-content）
默认情况下，flex子元素会挤在一行。若需换行，使用：
- flex-wrap: wrap：允许换行，第一行在上方
- flex-wrap: wrap-reverse：换行，第一行在下方
当多行存在时，可用 align-content 控制行与行之间的对齐方式，类似 justify-content，但作用于行。
基本上就这些关键点。通过组合 flex-direction、justify-content、align-items 和 flex-wrap，可以实现大多数常见的布局需求，比如居中、等分布局、顶部/底部对齐等。实际使用中建议先设置 display: flex，再根据方向和对齐目标调整对应属性。
