Flex：在包装的Flex中选择每一行的第一项和最后一项

Question

我将提供一些背景信息。 在这个项目中，我需要介绍一些希伯来语单词，并在其下方提供西班牙语翻译。 我需要使每行的希伯来语首尾两个字完全对齐。

问题在于，要对齐第一个单词，每个第一个单词（.field）都需要具有align-items: flex-start并要对齐最后一个单词，每个最后一行都需要具有align-items: flex-end

有没有一种方法可以选择每行的第一个和最后一个单词来应用这些规则并使它们对齐？ 您是否知道另一种获得相同结果的方法，也许不使用flex？

我将附上代码和图像以说明我想要的结果。

 .hebrew{ direction:rtl; display: flex; flex-wrap: wrap; justify-content: space-between; width: 200px; } .field { display: flex; direction: rtl; flex-direction: column; align-items: center; padding: 0 5px; } .t1 { font-family: 'David'; font-weight: bold; font-size: 6.5mm; } .t2 { font-size: 3mm; direction: ltr; } 

 <div class="hebrew"> <div class="field"><div id="1a" class="t1">אֱלֹהֵינוּ</div><div id="1b" class="t2">nuestro Di-s[Tdp.],</div></div> <div class="field"><div id="1a" class="t1">מֶלֶךְ</div><div id="1b" class="t2">Rey de</div></div> <div class="field"><div id="1a" class="t1">הָעוֹלָם</div><div id="1b" class="t2">el mundo,</div></div> <div class="field"><div id="1a" class="t1">פּוֹקֵחַ</div><div id="1b" class="t2">que abre(los ojos a)</div></div> </div> 

Answer 1

您可以使用flexbox通过相对于t1 限制 t2的宽度来修复它-在t2添加以下内容：

width: 0;
min-width: 100%;

请参见下面的演示：

 .hebrew { direction: rtl; display: flex; flex-wrap: wrap; justify-content: space-between; width: 200px; } .field { display: flex; direction: rtl; flex-direction: column; align-items: center; padding: 0 5px; } .t1 { font-family: 'David'; font-weight: bold; font-size: 6.5mm; background-color: bisque; } .t2 { font-size: 3mm; direction: ltr; width: 0; min-width: 100%; } 

 <div class="hebrew"> <div class="field"> <div id="1a" class="t1">אֱלֹהֵינוּ</div> <div id="1b" class="t2">nuestro Di-s[Tdp.],</div> </div> <div class="field"> <div id="1a" class="t1">מֶלֶךְ</div> <div id="1b" class="t2">Rey de</div> </div> <div class="field"> <div id="1a" class="t1">הָעוֹלָם</div> <div id="1b" class="t2">el mundo,</div> </div> <div class="field"> <div id="1a" class="t1">פּוֹקֵחַ</div> <div id="1b" class="t2">que abre(los ojos a)</div> </div> <div class="field"> <div id="1a" class="t1">אֱלֹהֵינוּ</div> <div id="1b" class="t2">nuestro Di-s[Tdp.],</div> </div> <div class="field"> <div id="1a" class="t1">מֶלֶךְ</div> <div id="1b" class="t2">Rey de</div> </div> <div class="field"> <div id="1a" class="t1">הָעוֹלָם</div> <div id="1b" class="t2">el mundo,</div> </div> <div class="field"> <div id="1a" class="t1">פּוֹקֵחַ</div> <div id="1b" class="t2">que abre(los ojos a)</div> </div> <div class="field"> <div id="1a" class="t1">אֱלֹהֵינוּ</div> <div id="1b" class="t2">nuestro Di-s[Tdp.],</div> </div> <div class="field"> <div id="1a" class="t1">מֶלֶךְ</div> <div id="1b" class="t2">Rey de</div> </div> <div class="field"> <div id="1a" class="t1">הָעוֹלָם</div> <div id="1b" class="t2">el mundo,</div> </div> <div class="field"> <div id="1a" class="t1">פּוֹקֵחַ</div> <div id="1b" class="t2">que abre(los ojos a)</div> </div> </div>