如何解决Flexbox布局中阿拉伯文元素宽度不一致问题？

核心问题分析 #

阿拉伯文属于RTL（从右到左）排版语言，若flex容器未明确子元素的空间分配规则，文本排版特性会干扰宽度计算逻辑。你尝试的width: auto会让元素随内容自适应，width: 100%则会忽略flex容器的空间分配机制，因此无法实现50%宽度均分的效果。

具体修复步骤 #

1. 配置父容器的Flex基础布局 #

确保.translation容器开启flex布局，并设置合理的换行规则：

.translation {
  display: flex;
  flex-wrap: wrap; /* 小屏幕下自动换行适配 */
  gap: 1.5rem; /* 可选，添加元素间间距提升可读性 */
}

2. 强制子元素均分宽度 #

给每个.lang元素设置flex: 1 1 50%，该属性的作用是：

• flex-grow: 1：允许元素在有剩余空间时自动扩展
• flex-shrink: 1：允许元素在空间不足时自动收缩
• flex-basis: 50%：将元素基础宽度设为容器的50%
  同时添加box-sizing: border-box避免内边距、边框影响宽度计算：

.lang {
  flex: 1 1 50%;
  box-sizing: border-box;
  padding: 0 1rem; /* 可选，添加内边距优化文本排版 */
}

3. 优化阿拉伯文RTL排版体验（可选） #

为阿拉伯文内容添加RTL布局支持，让文本排版更符合语言习惯：

.extract.ar {
  direction: rtl;
  text-align: right;
}

完整整合代码 #

HTML部分 #

<body>
  <div class="translation">
    <div class="lang">
      <h3 class="lang-name">Français</h3>
      <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget tellus tempus, eleifend est a, commodo leo. Morbi mattis neque at magna malesuada semper sit amet ut ex. Curabitur facilisis, tortor sit amet vehicula vulputate, risus purus malesuada est, vel laoreet nisi tortor vel dui. Fusce accumsan nisl vel placerat semper. Vivamus id quam vel sapien aliquam semper. Morbi elementum lacinia neque, ullamcorper sodales sem bibendum vel. Vivamus eu volutpat erat.

      <br>Duis et convallis eros, id porta eros. Fusce at finibus nisl. Nulla in dictum neque. Suspendisse sed dui in nibh luctus mollis. Curabitur pharetra dapibus risus nec accumsan. Maecenas tincidunt eget nunc sed pellentesque. Nunc ante arcu, dictum sed odio in, cursus semper est. Cras fermentum, ante vitae aliquet faucibus, odio mi dapibus felis, vel placerat dolor nulla et est.
      </p>
    </div>
    <div class="lang">
      <h3 class="lang-name">Arabe</h3>
      <p class="extract ar">ينتهي السفر في جو ساكن إلى حد ما. لا يتكلم كثيرا الرجلان الجالسان في المقدمة. و الذين في المؤخرة مجتهدون فينكبون على المطالعة أو يلعبون لعبة الإحاجي حسب المناظر التي تتتابع أمام عيونهم. فكان النهار جميلا لكنه يبدأ يمحي قليلا قليلا عند وصولهم إلى مدينة ڤان. و يبقى أقل من ساعة قبل وقوف السيارة أمام منزلهم. سيصلون عند المغيب و هذا طريق جيد لإنهاء النهار بشكل رائع و لإزالة التوترات. 
      <br>
      فلما سلكوا الطريق الذي يحاذي ساحل المحيط في المؤخرة ليس هناك ولد واحد فقط بل ولدان مفتونان بالمنظر و يتأثران بهذا المنظر الساحر الذي يرؤونه للمرة الأولى وفي عيونهم وهوج برتقالية تشبه أضواء النفق بشكل مستمر و بشكل أفضل أيضا. بعيدا من نفق يقدم المحيط نفسه لهم. لما ركن پول السيارة جولي تشعر أنها في حلم فتلمح أن الشاطئ قريب في الخلف و قد سمعت هدير الأمواج.
      </p>
    </div>
  </div>
</body>

CSS部分 #

.translation {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.lang {
  flex: 1 1 50%;
  box-sizing: border-box;
}

.extract.ar {
  direction: rtl;
  text-align: right;
}

按上述配置后，无论内容是LTR还是RTL语言，两个.lang元素都会稳定占据容器的50%宽度，同时在小屏幕设备上自动换行适配。

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