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 修复 约束 t2相对于t1的宽度 - 添加到{{ 1}}这个：

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%;
}