PP-YOLOE在OpenVINO上的端到端部署包：含ONNX转IR、Python/C++双推理实现与实测图例
2026/7/15 22:12:26
一、弹性盒子概述
1.1 基本概念
弹性盒子（Flexbox） 是CSS3中引入的一种布局手段，主要用于代替浮动完成页面布局。
特性 | 说明 |
|---|---|
核心优势 | 使元素具有弹性，可根据页面大小自动调整 |
相比浮动 | 更灵活，无高度塌陷问题 |
兼容性 | CSS3新增特性，适用于IE10+版本浏览器 |
1.2 开启弹性盒子
display: flex; /* 块级弹性容器 */ display: inline-flex; /* 行内弹性容器 */1.3 相关概念
术语 | 说明 |
|---|---|
弹性容器 | 设置了 |
弹性元素 | 弹性容器的直接子元素 |
注意：一个元素可以同时是弹性容器和弹性元素（即嵌套使用）。
二、弹性容器属性
2.1 flex-direction — 主轴方向控制
作用：指定容器中弹性元素的排列方式（即主轴方向）。
值 | 描述 | 主轴方向 |
|---|---|---|
| 默认值，水平排列（左→右） | 自左向右 |
| 反向水平排列（右→左） | 自右向左 |
| 纵向排列（上→下） | 自上向下 |
| 反向纵向排列（下→上） | 自下向上 |
.container { display: flex; flex-direction: row; /* 水平排列（默认） */ flex-direction: column; /* 垂直排列 */ }2.2 justify-content — 主轴排列方式
作用：控制弹性元素在主轴上的排列方式。
值 | 描述 |
|---|---|
| 默认值，沿主轴起点排列 |
| 沿主轴终点排列 |
| 沿主轴居中排列 |
| 两端对齐排列（两端无空隙，中间均匀分布） |
| 空白间距平均分布在弹性元素两侧 |
| 所有间距完全相等 |
.container { justify-content: center; /* 居中 */ justify-content: space-between; /* 两端对齐 */ justify-content: space-around; /* 两侧等距 */ }2.3 align-items — 侧轴单行排列
作用：控制单行弹性元素在侧轴上的排列方式。
值 | 描述 |
|---|---|
| 默认值，拉伸填充（元素未设高度时） |
| 沿侧轴起点排列 |
| 沿侧轴终点排列 |
| 沿侧轴居中排列 |
| 沿基线对齐 |
.container { align-items: center; /* 垂直居中 */ align-items: stretch; /* 拉伸填满 */ }2.4 flex-wrap — 换行控制
作用：控制弹性元素是否换行。
值 | 描述 |
|---|---|
| 默认值，不换行（元素可能会被压缩） |
| 换行 |
| 换行 + 反转排列顺序 |
.container { flex-wrap: wrap; /* 允许换行 */ }2.5 align-content — 侧轴多行排列
作用：控制多行弹性元素在侧轴上的排列方式（需配合flex-wrap: wrap使用）。
值 | 描述 |
|---|---|
| 默认值，拉伸填满 |
| 沿侧轴起点排列 |
| 沿侧轴终点排列 |
| 沿侧轴居中排列 |
| 两端对齐排列 |
| 空白间距平均分布在弹性元素两侧 |
.container { flex-wrap: wrap; align-content: center; /* 多行居中 */ align-content: space-between; /* 多行两端对齐 */ }2.6 flex-flow — 简写属性
作用：flex-direction和flex-wrap的简写。
flex-flow: <flex-direction> <flex-wrap>; /* 示例 */ flex-flow: row wrap; /* 水平排列 + 允许换行 */ flex-flow: column nowrap; /* 垂直排列 + 不换行 */三、弹性元素属性
3.1 order — 排列顺序
作用：定义弹性元素的排列顺序。
属性 | 说明 |
|---|---|
默认值 |
|
规则 | 数值越小，排列越靠前 |
.item1 { order: 3; } /* 排在后面 */ .item2 { order: 1; } /* 排在前面 */ .item3 { order: 2; } /* 排在中间 */3.2 flex-grow — 放大比例
作用：定义弹性元素的放大比例。
属性 | 说明 |
|---|---|
默认值 |
|
规则 | 按比例分配剩余空间 |
.item1 { flex-grow: 1; } /* 占1份 */ .item2 { flex-grow: 2; } /* 占2份（比item1多占一倍） */3.3 flex-shrink — 缩小比例
作用：定义弹性元素的缩小比例。
属性 | 说明 |
|---|---|
默认值 |
|
规则 | 值越大，缩小幅度越大 |
.item1 { flex-shrink: 0; } /* 不缩小 */ .item2 { flex-shrink: 2; } /* 缩小幅度是默认的2倍 */3.4 flex-basis — 基准大小
作用：定义在分配多余空间之前，弹性元素占据的主轴空间。
属性 | 说明 |
|---|---|
默认值 |
|
取值 | 像素值、百分比等 |
.item { flex-basis: 200px; /* 主轴方向上的初始大小为200px */ }3.5 flex — 简写属性
作用：flex-grow、flex-shrink、flex-basis的简写。
flex: <flex-grow> <flex-shrink> <flex-basis>; /* 默认值 */ flex: 0 1 auto; /* 常用写法 */ flex: 1; /* flex: 1 1 0%（等分剩余空间） */ flex: none; /* flex: 0 0 auto（固定大小） */ flex: auto; /* flex: 1 1 auto（自动适应） */3.6 align-self — 单独对齐
作用：允许单个弹性元素拥有与其他元素不同的对齐方式，覆盖父元素的align-items属性。
值 | 说明 |
|---|---|
| 默认值，继承父元素的 |
| 侧轴起点对齐 |
| 侧轴终点对齐 |
| 侧轴居中对齐 |
| 拉伸填满 |
| 基线对齐 |
.container { align-items: flex-start; /* 其他元素顶部对齐 */ } .special-item { align-self: center; /* 该元素单独居中对齐 */ }四、完整示例代码
4.1 HTML结构
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>4.2 CSS样式
/* 基础重置 */ * { margin: 0; padding: 0; list-style: none; } /* 弹性容器 */ ul { width: 500px; height: 500px; border: 10px solid red; margin: 10px auto; /* 开启弹性盒子 */ display: flex; flex-direction: row; /* 水平排列 */ justify-content: center; /* 主轴居中 */ align-items: center; /* 侧轴居中 */ flex-wrap: wrap; /* 允许换行 */ } /* 弹性元素 */ li { width: 100px; height: 100px; background-color: #bfa; font-size: 50px; line-height: 100px; text-align: center; }五、核心概念总结
5.1 主轴与侧轴
轴 | 说明 |
|---|---|
主轴 | 弹性元素的排列方向（由 |
侧轴 | 与主轴垂直的方向 |
5.2 布局逻辑
第一步：确定主轴方向（flex-direction） 第二步：控制主轴排列（justify-content） 第三步：控制侧轴排列（align-items / align-content） 第四步：处理溢出换行（flex-wrap）5.3 实用技巧
技巧 | 说明 |
|---|---|
水平垂直居中 |
|
等分空间 | 所有子元素设置 |
固定+自适应 | 固定元素不加flex，自适应元素设置 |
排序调整 | 使用 |
个别元素特殊对齐 | 使用 |
简写属性 | 使用 |
六、常见问题解答
Q1：Flexbox 和浮动有什么区别？
对比项 | Flexbox | 浮动（float） |
|---|---|---|
高度塌陷 | 无此问题 | 需要清除浮动 |
对齐方式 | 灵活多样 | 有限 |
响应式 | 天然支持 | 需要额外处理 |
使用难度 | 简单 | 较复杂 |
Q2：什么时候用align-items，什么时候用align-content？
单行时用
align-items多行时（配合
flex-wrap: wrap）用align-content
Q3：flex: 1是什么意思？
等同于flex: 1 1 0%，表示：
flex-grow: 1（可放大）flex-shrink: 1（可缩小）flex-basis: 0%（初始大小为0，公平分配空间）
七、总结
本文详细介绍了CSS弹性盒子布局的完整知识体系：
基本概念：弹性容器、弹性元素、主轴与侧轴
容器属性：flex-direction、justify-content、align-items、flex-wrap、align-content、flex-flow
元素属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
实战技巧：水平垂直居中、等分空间、固定+自适应布局
掌握Flexbox布局后，你将能够轻松应对绝大多数页面布局需求，告别浮动带来的各种问题。