Flex：选择包裹柔线内每一行的第一个和最后一个项目

Question

我会提供一些背景。 在这个项目中，我需要在他们下面展示一些西班牙语翻译的希伯来字。 我需要每行的希伯来语第一个和最后一个单词完全对齐。

的问题是，对齐的第一句话，每一个字第（点域）需要有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> \t \t \t 
 
<div class="field"><div id="1a" class="t1">מֶלֶךְ</div><div id="1b" class="t2">Rey de</div></div> \t \t \t 
 
<div class="field"><div id="1a" class="t1">הָעוֹלָם</div><div id="1b" class="t2">el mundo,</div></div> \t \t \t 
 
<div class="field"><div id="1a" class="t1">פּוֹקֵחַ</div><div id="1b" class="t2">que abre(los ojos a)</div></div> \t \t 
 
    
 
</div>

Answer 1

可以修复它使用flexbox通过约束的t2相对于t1宽度 - 添加到t2此：

width: 0; 
min-width: 100%; 

见DE莫如下：

.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>