如何使flex布局列内的行内元素始终显示在同一行？

我遇到的问题和类似场景接近，核心区别是我把文本块放在了column布局里。目前的情况是：在Mac屏幕上，BLAH BLAH文本会换行到新行，而在更大的显示器上则和数字顶部对齐。想知道有没有办法让文本“更紧凑”（每行少放些单词），让整个文本块保持缩进且始终和数字显示在同一行？

我的代码 #

HTML代码：

<div class="row" className="list">
   <div class="column">
      <div>
         <span className="number">1. </span>
         <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
      </div>
   </div>
   <div class="column">
      <div>
         <span className="number">2. </span>
         <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
      </div>
   </div>
   <div class="column">
      <div>
         <span className="number">3. </span>
         <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
      </div>
   </div>
</div>

CSS代码：

.row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
}
.column {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
   flex: 1;
   text-align: left;
   padding: 1em 2em;
   .number {
      display: inline-block;
   }
   .words {
      display: inline-block;
      margin-left: 1em;
      vertical-align: top;
      width: 90%;
   }
}

解决方案 #

方法1：用Flex布局固定数字+控制文本宽度

把数字和文本的父容器改成flex布局，确保两者始终在同一行，同时限制文本的最大宽度来控制紧凑度：

/* 修改.column下的子div样式 */
.column > div {
  display: flex;
  align-items: flex-start; /* 保持文本和数字顶部对齐 */
}
/* 固定数字宽度，不被压缩 */
.number {
  flex-shrink: 0;
}
/* 调整文本样式，去掉inline-block，用flex控制宽度 */
.words {
  margin-left: 1em;
  flex: 1;
  max-width: calc(100% - 2.5em); /* 减去数字和边距的宽度，可根据需求调整 */
}

方法2：用Grid布局划分固定列

给数字和文本的父容器设置Grid布局，固定数字列的宽度，文本列自动填充，同时通过max-width控制文本紧凑度：

.column > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em; /* 替代原来的margin-left，间距更统一 */
  align-items: start;
}
.words {
  max-width: 220px; /* 直接设置文本最大宽度，控制每行单词数量 */
}

核心要点

• 要避免文本挤掉数字换行，关键是固定数字的宽度（用flex-shrink:0或Grid的auto列），不让它被压缩。
• 通过max-width控制文本的最大宽度，就能实现“每行更少单词”的紧凑效果，这个值可以根据你的需求调整，越小越紧凑。

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