flexbox是什么

Flexbox（Flexible Box Layout）是一种现代CSS布局模型，用于创建灵活的、响应式的网页布局。它允许开发者轻松地控制元素在容器内的排列方式，包括如何分配空间、对齐以及项目之间的间距。Flexbox特别适用于那些需要适应屏幕大小变化的场景，如移动设备上的布局调整。

Flexbox基于两大部分规则来工作：
1. **主轴（main axis）**：默认沿水平方向（从左到右），可以通过`flex-direction`属性改变为垂直方向（从上到下）。
2. **交叉轴（cross axis）**：垂直于主轴的方向。

核心概念有以下几个：
- **伸缩因子（flex grow/shrink）**：确定元素是否能自动增长或收缩占据可用空间。
- **基础大小（flex base size）**：元素的初始大小，可以由`flex-basis`设置。
- **对齐（justify content / align items）**：决定了项目在主轴和交叉轴上的对齐方式。
- **包装（wrap）**：当项目的总宽度超出容器时，元素是否换行。

通过一系列的属性，例如`flex`（简写，包含伸缩因子和基础大小）、`flex-grow`、`flex-shrink`、`flex-wrap`等，你可以精确地控制Flexbox容器内项目的排列。使用Flexbox可以使页面布局变得更加简洁和灵活。