<!DOCTYPE html> <html> <head><meta charset="UTF-8"><style>.container {display: flex;margin: 20px 0;border: 1px solid #ccc;padding: 10px;}.box {padding: 20px;text-align: center;color: white;font-weight: bold;}</style> </head> <body><!-- 示例1：等分三列 --> <h3>1. 等分三列 (flex: 1)</h3> <div class="container"><div class="box" style="flex: 1; background: #3498db;">1/3</div><div class="box" style="flex: 1; background: #2ecc71;">1/3</div><div class="box" style="flex: 1; background: #e74c3c;">1/3</div> </div><!-- 示例2：1:2:1比例 --> <h3>2. 1:2:1比例</h3> <div class="container"><div class="box" style="flex: 1; background: #3498db;">1/4</div><div class="box" style="flex: 2; background: #2ecc71;">2/4</div><div class="box" style="flex: 1; background: #e74c3c;">1/4</div> </div><!-- 示例3：固定宽度+自动填充 --> <h3>3. 固定宽度+自动填充</h3> <div class="container"><div class="box" style="width: 200px; background: #3498db;">固定200px</div><div class="box" style="flex: 1; background: #2ecc71;">自动填充剩余</div> </div><!-- 示例4：不等比例分配 --> <h3>4. 不等比例分配 (3:5:2)</h3> <div class="container"><div class="box" style="flex: 3; background: #3498db;">3/10</div><div class="box" style="flex: 5; background: #2ecc71;">5/10</div><div class="box" style="flex: 2; background: #e74c3c;">2/10</div> </div><!-- 示例5：混合固定和比例 --> <h3>5. 混合固定和比例</h3> <div class="container"><div class="box" style="width: 150px; background: #3498db;">固定150px</div><div class="box" style="flex: 2; background: #2ecc71;">比例2</div><div class="box" style="flex: 3; background: #e74c3c;">比例3</div><div class="box" style="width: 100px; background: #9b59b6;">固定100px</div> </div><!-- 示例6：最小宽度限制 --> <h3>6. 最小宽度限制</h3> <div class="container"><div class="box" style="flex: 1; min-width: 100px; background: #3498db;">最小100px</div><div class="box" style="flex: 2; background: #2ecc71;">比例2</div><div class="box" style="flex: 1; max-width: 200px; background: #e74c3c;">最大200px</div> </div></body> </html>