Flexbox垂直对齐包装器中的特定内容？

Question

我的CMS有相当严格设置2列有标题和内容，如下图所示：

.wrapper { 
 
    overflow: auto; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 
} 
 
.left, 
 
.right { 
 
    float: left; 
 
    width: 45%; 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <div class="left"> 
 
     <h3>Title (should be aligned to top)</h3> 
 
     <div class="content"> 
 
      left<br> 
 
      left<br> 
 
      left<br> 
 
      left<br> 
 
     </div> 
 
    </div> 
 
    <div class="right"> 
 
     <h3>Title (should be aligned to top)</h3> 
 
     <div class="content"> 
 
      right 
 
     </div> 
 
    </div> 
 
</div>

---

jsFiddle

---

我想使.content每列垂直对齐中间但保持标题h3与顶部垂直对齐。

通常我会用Flexbox，就这样实现垂直对齐：

.wrapper { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
} 

但当然，这将影响内.wrapper所有元素。

有人会知道一种方法，我可以'目标'.content类，并获得相同的效果（记住我不能真正改变HTML）？

Answer 1

这是一种黑客攻击，但它的工作原理：

1. 从wrapper和flex:1到柔性孩子取出align-items: centerleft和right

2. 使内部left和right容器column flexbox和中心h3和content使用justify-content:center

3. 使用margin-bottom:auto推动双方h3顶端，并允许content留在中间。

下面

观看演示：

.wrapper { 
 
    overflow: auto; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
.left, 
 
.right { 
 
    padding: 5px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    flex: 1; 
 
} 
 
.left h3, .right h3 { 
 
    margin-bottom: auto; 
 
} 
 
.content { 
 
    margin-bottom: auto; 
 
}

<div class="wrapper"> 
 

 
    <div class="left"> 
 
    <h3> 
 
    Title (should be aligned to top) 
 
    </h3> 
 
    <div class="content"> 
 
     left 
 
     <br>left 
 
     <br>left 
 
     <br>left 
 
     <br> 
 
    </div> 
 
    </div> 
 

 
    <div class="right"> 
 
    <h3> 
 
    Title (should be aligned to top) 
 
    </h3> 
 
    <div class="content"> 
 
     right 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

检查这个fiddle

.wrapper { 
    overflow: auto; 
    border: 1px solid #ccc; 
    text-align: center; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: flex-start; 
    -webkit-align-items: flex-start; 
    -webkit-box-align: flex-start; 
    align-items: flex-start; // changed 
}