css flex 和inline-flex差别

CSS中的`flex`布局和`inline-flex`布局都是用于创建响应式、灵活的容器布局，但它们之间存在一些关键区别：

1. **基础用法**：
- `display: flex;`：这是一个块级布局，适用于需要沿主轴（默认为水平方向）进行伸缩和排列的元素。它可以处理元素的顺序、对齐以及换行等。
- `display: inline-flex;`：这是内联级布局，适用于行内的元素。它保持了元素的文本流性质，元素会围绕基线进行排列，不会自动换行，适合构建单行的自适应布局。

2. **对齐方式**：
- `flex`布局提供了丰富的对齐和分布选项，比如`justify-content`和`align-items`属性。
- `inline-flex`的对齐使用的是`text-align`和`align-self`，与文本元素的对齐规则一致，如`left`, `right`, `center`, `justify-center`等。

3. **元素顺序**：
- `flex`布局允许动态改变元素的顺序，通过调整`order`属性。
- `inline-flex`元素的顺序通常由文本流决定，不能直接改变。

4. **扩展性**：
- `flex`更灵活，可以包含嵌套的flex容器，创建复杂的布局结构。
- `inline-flex`更适合简单的行内自适应需求，不支持嵌套。

5. **兼容性**：
- `flex`布局在旧版本的浏览器中可能需要引入`-webkit-`前缀，而`inline-flex`通常不需要，因为它是`text-align`特性的扩展。