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

Posted 2023-03-05

【中文标题】Flex：选择包裹的flex中每一行的第一个和最后一个项目

【英文标题】：Flex: Select the first and last item in each row within a wrapped flex

【发布时间】：2017-05-10 14:29:39

【问题描述】：

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

问题是，要对齐第一个单词，每个第一个单词（.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>

【问题讨论】：

在图片中，字段/文本块的数量似乎不同，这是真的吗？ ...如果是，那么您需要包装每一行，或使用脚本

【参考方案1】：

您可以修复它使用flexbox 通过约束 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>

【讨论】：

好答案！我添加了更多的单词和背景颜色来显示要求已达到。另外，作为旁注，第一个要求（应用不同的样式作为行中的元素位置）已经被问过很多次了，不幸的是它目前不可行