Flex：Select 包裹的 flex 中每一行的第一个和最后一个项目

Question

我将提供一些背景信息。在这个项目中，我需要展示一些希伯来语单词及其下方的西班牙语翻译。我需要将每行的希伯来语第一个词和最后一个词完全对齐。

问题是，为了对齐第一个单词，每个第一个单词 (.field) 需要 align-items: flex-start 为了对齐最后的单词，最后一行需要 align-items: flex-end

有没有办法 select 每行的第一个词和最后一个词来应用这些规则并使它们对齐？您是否知道另一种实现相同结果的方法，也许不使用 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相对于[=的宽度15=] - 添加到 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>

Flex：Select 包裹的 flex 中每一行的第一个和最后一个项目

Flex: Select the first and last item in each row within a wrapped flex

html

css

vertical-alignment

flexbox