html - 柔性 : Select the first and last item in each row within a wrapped 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 constraining 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>