上、中、下の項目を整列させていません

Question

divには左に画像があり、右にいくつかの情報（スパン、h3、別のスパン）があります。そして、画像の右端の最初のスパンを上に、h3を中央に、他のスパンを下にしたいと思います。しかし、これは動作していません。また、セパレータdivの右側には、下に位置するリンクと、中央に配置したいスパンがあります。

問題はどこにあるのですか？

例：https://jsfiddle.net/ct1ghpk2/2/

HTML：

<div class="item"> 
    <img src=""> 
    <div class="item_info"> 
     <span class="align-t">Span aligned at top</span> 
     <h3>Title aligned at center</h3> 
     <span class="align-b">Span aligned at bottom</span> 
    </div> 
    <div class="item_separator"></div> 
    <div class="item_details"> 
     <span>Span aligned at center</span> 
     <a href="">Link aligned at bottom</a> 
    </div> 
    </div> 

のCss：

.item{ 
    background-color:white; 
    display: flex; 
    margin-bottom: 20px; 
    align-items: flex-start; 
    padding: 10px; 
    justify-content: space-between; 
    height: 10em; 
    border:1px solid red; 
} 

.item img{ 
    width: 20%; 
    height: 100%; 
} 

.item_info{ 
    margin-left: 10px; 
    flex-basis: 64%; 
    display:flex; 
    flex-direction:column; 
} 

.item_info .align-t{ 
    color:gray; 
    font-size: 0.8em; 
    margin-bottom: 20px; 
} 

.item_info h3{ 
    font-size: 1em; 
    text-align: justify; 
    margin-bottom: 20px; 
} 

.item-info .align-b{ 
} 

.item_separator{ 
    height:100%; 
    width:1px; 
    background-color:red; 
} 

.item_details{ 
    flex-basis: 30%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
} 

.item_details span{ 
    font-size: 0.85em; 
    margin-bottom: 10px; 
    color:gray; 
} 

.item_details a{ 
    font-size: 0.85em; 
    padding: 10px; 
    border-radius: 4px; 
    width: 100%; 
    text-align: center; 
} 


img { 
    width: 100%; 
    max-width: 100%; 
    vertical-align: middle; 
    margin: 0; 
} 

Answer 1

は.item-info 100％の高さを与えます。次に、フレックスボックスのプロパティjustify-content: space-between;を.item-infoに追加すると、div内のコンテンツの間隔を自由に設定できます。

.item-info { 
    #yourStyles 
    height: 100%; 
    justify-content: space-between; 
} 

は、CSSフレックスボックスの詳細と、それを使用しているときに利用可能なプロパティのためthis linkを参照してください。列の.item-details ...

.item_details{ 
    #yourStyles 
    height: 100%; 
    justify-content: flex-end; 
} 

.item_details span{ 
    #yourStyles 
    margin-top: 25%; 
    text-align: center; 
} 

justify-content: flex-end;については

は、コンテンツが下から始まり、アップ行かせる...そのdivの内側スパンに25％のトップマージンを追加すると、あなたを与えるだろう他のすべてが底に押し込まれている間にあなたが探しているスペース。

Answer 2

あなたが求めソリューションが私の理解あたりとして、次のようにする必要があります。

私が行った変更はこれに含まれています。

.item_details{ 
    flex-basis: 30%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    position: relative; 
} 

.item_details span{ 
    font-size: 0.85em; 
    color:gray; 
} 

.item_details a{ 
    font-size: 0.85em; 
    border-radius: 4px; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    bottom:0; 
} 

フィドル：それは、親の完全な高さがあるのでhttps://jsfiddle.net/ct1ghpk2/6/