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>