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 的宽度 - 添加到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>