フレックス：ラップされたフレックス内の各行の最初と最後の項目を選択してください。

Question

いくつかの文脈を提供します。 このプロジェクトでは、ヘブライ語の下にスペイン語の翻訳を表示する必要があります。 私は、各行のヘブライ語の最初と最後の単語が完全に整列する必要があります。

問題は各最初のワード（選択図】図）、最初の単語を整列させる、ということであるがalign-items: flex-start を有し、最後の言葉を整列する必要が、各最終行align-items: flex-end

を持っている必要がありする方法はあります各行の最初と最後の単語を選択してそれらのルールを適用し、それらのルールを整列させますか？ フレックスを使用していない同じ結果を達成する別の方法が分かりますか？

希望の結果を示すためにコードと画像を添付します。

.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

あなたはできるそれがt1に対するt2の幅を制約するによってflexboxを使用してを修正 - t2これに追加します。

width: 0; 
min-width: 100%; 

参照してください。デ以下MO：フィールド/テキストチャンクの異なる量のように見える絵で

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