如何在水平弹性框中垂直对齐嵌套的子项？答案

【问题标题】：How to vertically align nested children in a horizontal flexbox?如何在水平弹性框中垂直对齐嵌套的子项？
【发布时间】：2020-03-26 09:29:09
【问题描述】：

正如您在下面的 sn-p 中看到的，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>

【问题讨论】：

你不能。没有可以对齐不共享父元素的 CSS 属性
stackoverflow.com/questions/56711501/…

标签： html css flexbox vertical-alignment

【解决方案1】：

除了测量每个 bar-wrapper 子对象并动态分配高度 (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/> 或作为父容器的 border-left 并将点添加为伪元素，例如

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

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

【讨论】：