Flexboxは、特定のコンテンツをラッパー内で垂直に整列させますか？

Question

以下のように私のCMSは、ヘッダとコンテンツとの2列のではなく、剛性のセットアップを持っている：私は.contentを作りたい

.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

---

各列の中央に垂直に整列しますが、ヘッダーは保持しますh3が上に垂直に整列しています。

通常、私は、次のようなフレキシボックスを使用して垂直整列達成するであろう：

.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. フレックス子供leftとright

に wrapperと flex:1から align-items: centerを削除します

2. 内側をleftとにするトップに両方h3を押してcontentが真ん中に滞在できるようにするために使用margin-bottom:autojustify-content:center

3. を使用してコンテナcolumn flexboxとセンター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 
}