基本概念

设置 display: flex 或者 display: inline-flex 的元素称为 Flex 容器。在 Flex 容器中的子元素，包括其伪元素 ::before 、::after 和 文本节点都将成为 Flex 项目。

• display: flex：保持元素块状特性，宽度默认 100%，不和内联元素一行显示。
• display： inline-flex：inline-flex 容器为 inline 特性，因此可以和图片文字一行显示。