display:flex解释

`display:flex`是CSS3中引入的一种弹性盒布局模型，它允许您轻松地创建响应式和动态的用户界面布局。当应用于一个容器元素上，如`<div>`，它会让该元素内部的内容按行或列排列，并具备以下几个特性：

1. **主轴**（Main Axis）：默认为从左到右的方向，可以通过`flex-direction`属性设置为`row-reverse`、`column`或`column-reverse`。
2. **交叉轴**（Cross-axis）：垂直于主轴，对于行布局是从上到下，对于列布局则相反。
3. **伸缩（Flex items）**：每个子元素可以沿着主轴自动调整大小，通过`flex`属性控制其伸缩比例。
4. **对齐**：子元素可以在容器的不同位置对齐，例如`align-items`控制交叉轴上的对齐方式，`justify-content`控制主轴上的对齐。

使用`display:flex`可以让布局更加简洁，适合布局需要自适应屏幕大小或内容区域变化的情况。