As you can see in the snippet below, the dots part of foo-wrapper do not follow the vertical alignment of the text labels which are part of bar-wrapper .
(如下面的代码片段所示， foo-wrapper的圆点部分不遵循bar-wrapper的文本标签的垂直对齐方式。)
Yet, this is expected, due to the :nth-child(i) rules. (但是，由于:nth-child(i)规则，这是可以预期的。)
How can I make the dots, which are the children of a different container which is subsequently a child of a horizontal flexbox (the parent-wrapper ), follow the vertical alignment of the children from the other container?
(如何使这些点成为另一个容器的子元素，这些parent-wrapper元素随后是水平flexbox的子元素（ parent-wrapper ），跟随这些子元素与另一个容器的垂直对齐？)
Do I have to renounce flexbox altogether and use something like the grid layout?
(我是否必须完全放弃flexbox并使用诸如网格布局之类的东西？)
<!DOCTYPE html> <head> <style> .parent-wrapper { align-items: stretch; display: flex; flex-flow: row nowrap; height: 256px; width: 100%; } .foo-wrapper { background-color: orange; margin: 1.5rem; width: 2px; } .dot { background-color: #ebf0ff; border-radius: 0.5rem; height: 1rem; width: 1rem; } .foo-wrapper div:nth-child(1) { margin-top: 1rem; } .foo-wrapper div:nth-child(2) { margin-top: 1rem; } .foo-wrapper div:nth-child(3) { margin-top: 1rem; } .bar-wrapper { border: 1px solid green; display: flex; flex-flow: column nowrap; margin: 1.5rem; flex-grow: 1; } .bar-wrapper div:nth-child(1) { margin-top: 1rem; } .bar-wrapper div:nth-child(2) { margin-top: 2rem; } .bar-wrapper div:nth-child(3) { margin-top: 4rem; } </style> </head> <body> <div class="parent-wrapper"> <div class="foo-wrapper"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <div class="bar-wrapper"> <div>Lorem</div> <div>ipsum</div> <div>dolores</div> </div> </div> </body>
ask by Paul Razvan Berg translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
