css flex的排列方式

Flex布局通过display: flex启用，核心是主轴与交叉轴的对齐控制。1. flex-direction设置主轴方向（row/column及其反向）；2. justify-content控制项目在主轴对齐（flex-start至space-evenly）；3. align-items定义交叉轴对齐方式（stretch至baseline）；4. align-self允许单个项目覆盖align-items；5. flex-wrap决定是否换行（nowrap/wrap/wrap-reverse）；6. 多行时align-content控制行间在交叉轴分布。组合这些属性可高效实现各类布局。

Flex布局（Flexible Box Layout）是CSS中一种强大的一维布局模型，适合在容器内对子元素进行排列和对齐。它通过设置容器的 display: flex 来启用，主要涉及两个部分：容器（flex container）和项目（flex items）。以下是常见的排列方式及其控制属性。

主轴方向排列（justify-content）

主轴默认是水平方向（从左到右），可以通过 flex-direction 改变。以下属性控制项目在主轴上的对齐方式：

结合 justify-content 可进一步控制主轴上的分布：

• justify-content: flex-start —— 项目靠向主轴起点（默认）
• justify-content: flex-end —— 靠向主轴终点
• justify-content: center —— 居中对齐
• justify-content: space-between —— 两端对齐，项目间间距相等
• justify-content: space-around —— 项目周围留有相等空间
• justify-content: space-evenly —— 所有项目之间和边缘间距完全相等

交叉轴对齐（align-items）

交叉轴垂直于主轴。例如主轴是row时，交叉轴就是垂直方向。以下属性控制项目在交叉轴上的对齐：

立即学习“前端免费学习笔记（深入）”；

标签： css flexbox ai flex布局 排列 网页布局