如何在Flex布局的Jinja模板HTML中实现Resource Name列内容换行？

我用Flex布局实现了一个自定义表格（包含Jinja模板），现在需要让Resource Name列的内容可以自动换行显示，现有代码如下：

CSS代码：

.table-container-0 {
  display: flex;
  flex-flow: column nowrap;
  background-color: white;
  width: 90%;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #DADADA;
}

.table-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #dadada;
}

.row-item-b {
  display: flex;
  flex: 1;
  font-size: 16px;
  padding: 8px 0;
  justify-content: center;
  align-items: center;
}

HTML（含Jinja模板）代码：

<div class="table-container-0">
  <p></p>
  <div class="table-row heading">
    <div class="row-item-h2">Resource Name</div>
    <div class="row-item-h2">Class</div>
    <div class="row-item-h2">Access</div>
  </div>
  {% for usrres in usrress %}
  <div class="table-row">
    {% for value in usrres %}
    <div class="row-item-b">{{ value }}</div>
    {% endfor %}
  </div>
  {% endfor %}
</div>

要实现Resource Name列的换行，需要针对该列单独调整样式，步骤如下：

1. 给Resource Name列添加专属类
   在Jinja循环中，判断当前是第一个列（即Resource Name列）时，额外添加一个类名（比如resource-name-col）：

   <div class="table-container-0">
     <p></p>
     <div class="table-row heading">
       <div class="row-item-h2 resource-name-col">Resource Name</div>
       <div class="row-item-h2">Class</div>
       <div class="row-item-h2">Access</div>
     </div>
     {% for usrres in usrress %}
     <div class="table-row">
       {% for value in usrres %}
         {% if loop.first %}
           <div class="row-item-b resource-name-col">{{ value }}</div>
         {% else %}
           <div class="row-item-b">{{ value }}</div>
         {% endif %}
       {% endfor %}
     </div>
     {% endfor %}
   </div>
   

2. 添加CSS样式允许换行
   在原有CSS基础上，新增以下样式：

   .resource-name-col {
     white-space: normal; /* 允许文本自动换行 */
     justify-content: flex-start; /* 内容左对齐，优化换行后的排版 */
     align-items: flex-start; /* 顶部对齐，避免多行内容垂直居中导致的间距问题 */
     padding-left: 8px; /* 可选：添加左侧内边距，避免内容贴边 */
     flex: 2; /* 可选：给该列分配更多宽度，根据实际需求调整比例 */
   }
   

说明 #

• 原row-item-b的justify-content: center和align-items: center会限制文本单行显示，通过white-space: normal开启自动换行。
• 调整对齐方式和内边距是为了让多行内容的排版更美观，可根据实际需求修改。
• 如果需要给Resource Name列分配更宽的空间，调整flex属性的数值即可（比如其他列flex:1，该列flex:2，即占2份宽度）。

内容的提问来源于stack exchange，提问作者Nupur