### Flask 应用中根据列表长度动态调整 HTML 页面上的 `div` 元素 为了实现基于列表长度来动态调整 HTML 页面中的 `div` 元素的数量或大小，在 Flask 中可以通过 Jinja2 模板引擎完成这一功能。具体方法是在 Python 后端处理数据并传递给前端模板，再利用条件语句和循环结构控制显示逻辑。 #### 控制 `div` 数量 通过遍历传入的列表对象，每项对应一个 `div` 块： ```jinja {% for item in items %} <div class="item"> {{ loop.index }}: {{ item }} </div> {% endfor %} ``` 这段代码会依据 `items` 列表的实际成员数创建相应数量的 `div` 容器[^3]。 #### 调整 `div` 尺寸 如果希望改变单个 `div` 的尺寸，则可以在样式定义里加入变量表达式或者使用 CSS 类名配合媒体查询等方式来进行响应式的布局设计。例如设置宽度为总宽除以项目总数的结果： ```css .item { width: calc(100% / {{ items|length }}); } ``` 此方式适用于需要均分容器空间的情况；也可以预先设定几种不同级别的类，并根据不同范围内的条目数目分配相应的类别标签[^2]。 对于更复杂的场景，比如当元素过多时采用多列展示形式，可以考虑引入 JavaScript 或者现成框架如 Bootstrap 来简化开发过程。 #### 实际案例演示 假设有一个名为 `notes` 的笔记集合要呈现于网页之上，可以根据其长度决定是否启用网格视图模式： ```python @app.route('/show_notes') def show_notes(): notes = get_all_notes() # 获取所有笔记的数据 return render_template('notes.html', notes=notes, use_grid=len(notes)>5) ``` 对应的模板文件部分片段如下所示： ```html+jinja <style> .grid-item { float:left;width:calc((100%-4*1em)/min({{ notes|length }}, 5));margin:.5em;} .list-item { display:block;margin-bottom:.5em;} </style> <h1>Notebook</h1> <a href="{{ url_for('new_note') }}">New Note</a> <h4>{{ notes|length }} notes:</h4> <ul style="list-style:none;padding-left:0;"> {% if use_grid %} {% set css_class='grid-item' %} {% else %} {% set css_class='list-item' %} {% endif %} {% for note in notes %} <li class="{{ css_class }}"> <p>{{ note.body }}</p> </li> {% endfor %} </ul> ``` 上述例子展示了如何根据实际业务需求灵活运用前后端协作机制达到预期效果。