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

Question

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

\n\n

问题是，为了对齐第一个单词，每个第一个单词（.field）需要有align-items: flex-start\n 并且为了对齐最后一个单词，每个最后一行需要有align-items: flex-end

\n\n

有没有办法选择每行的第一个和最后一个单词来应用这些规则并使它们对齐？\n您是否知道另一种方法来实现相同的结果，也许不使用 Flex？

\n\n

我将附上代码和图像来说明我想要的结果。\n

\n\n

\r\n

\r\n

.hebrew{\r\n    direction:rtl;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n    width: 200px;\r\n}\r\n.field {\r\n    display: flex;\r\n    direction: rtl;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    padding: 0 5px;\r\n}\r\n.t1 {  \r\n    font-family: \'David\';\r\n    font-weight: bold;\r\n    font-size: 6.5mm; \r\n}\r\n.t2 { \r\n    font-size: 3mm;\r\n    direction: ltr;  \r\n}

\r\n

<div class="hebrew">\r\n<div class="field"><div id="1a" class="t1">\xd7\x90\xd6\xb1\xd7\x9c\xd6\xb9\xd7\x94\xd6\xb5\xd7\x99\xd7\xa0\xef\xac\xb5</div><div id="1b" class="t2">nuestro Di-s[Tdp.],</div></div>\t\t\t\r\n<div class="field"><div id="1a" class="t1">\xd7\x9e\xd6\xb6\xd7\x9c\xd6\xb6\xd7\x9a\xd6\xb0</div><div id="1b" class="t2">Rey de</div></div>\t\t\t\r\n<div class="field"><div id="1a" class="t1">\xd7\x94\xd6\xb8\xd7\xa2\xef\xad\x8b\xd7\x9c\xd6\xb8\xd7\x9d</div><div id="1b" class="t2">el mundo,</div></div>\t\t\t\r\n<div class="field"><div id="1a" class="t1">\xef\xad\x84\xef\xad\x8b\xd7\xa7\xd6\xb5\xd7\x97\xd6\xb7</div><div id="1b" class="t2">que abre(los ojos a)</div></div>\t\t  \r\n  \r\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

您可以通过限制相对于的宽度来修复它- 添加到此：flexboxt2t1t2

\n\n

width: 0;\nmin-width: 100%;\n

\n\n

请参阅下面的演示：

\n\n

\r\n

\r\n

width: 0;\nmin-width: 100%;\n

\r\n

.hebrew {\r\n  direction: rtl;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: space-between;\r\n  width: 200px;\r\n}\r\n.field {\r\n  display: flex;\r\n  direction: rtl;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 0 5px;\r\n}\r\n.t1 {\r\n  font-family: \'David\';\r\n  font-weight: bold;\r\n  font-size: 6.5mm;\r\n  background-color: bisque;\r\n}\r\n.t2 {\r\n  font-size: 3mm;\r\n  direction: ltr;\r\n  width: 0;\r\n  min-width: 100%;\r\n}

\r\n

\r\n

\r\n

\n