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 
}