如何在水平 flexbox 中垂直对齐嵌套子项？

Question

正如您在下面的代码片段中看到的，foo-wrapper 下的点不遵循 bar-wrapper 下文本标签的垂直对齐方式。但根据 :nth-child(i) 规则，我期待这一点。

如何使点（它们是不同容器的子容器，随后又是水平弹性框（parent-wrapper）的子容器）遵循另一个容器的子容器的垂直对齐方式？

我是否必须完全放弃 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>

Answer 1

除了测量每个 bar-wrapper child 并动态分配高度 (js) 之外，我发现没有简单的方法可以做到这一点。目前最可行的解决方案似乎是重新布局。

案例 1：将 bar-wrapper 内容和 foo-wrapper 内容混合成一个 div。

.wrapper{
   display: flex;
   align-items: flex-start;
}
...
<div class="wrapper">
   <div class="dot"/>
   <div class="content">
      <p>text</p>
   </div>
<div>

案例 2：如果您想要这种精确的设计，请将左侧的线分开（作为简单的 <div/> 或作为 parent 容器的 border-left 和添加点作为 pseudo-element 例如

.content::before{
   position: absolute;
   content:"";
   height: 14px;
   width: 14px;
   border-radius: 7px;
   background: #000000;
   margin-left: -18px;
}
.content{
  position: relative;
  padding-left: 18px;
}

填充和边距是可选的，具体取决于您的布局。

如何在水平 flexbox 中垂直对齐嵌套子项？

How to vertically align nested children in a horizontal flexbox?

html

css

vertical-alignment

flexbox