Html+css 之 div 的flex 布局分配示例（AI生成）
<!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>
活到老，学到老。
浙公网安备 33010602011771号