Flexboxを使用して、残りのスペースの中央に1番目、2番目、3番目の3つの要素を同じ列に配置するにはどうすればよいですか？

Question

私は3段落の容器を持っています。最初の画像には画像が含まれています。 2番目はその写真のタイトルです。 3番目は画像の説明です。

私は説明の上にタイトル明らかに、残っている垂直方向のスペースの真ん中でするコンテナと、残りの2つの段落の先頭になりたい写真を必要としています。

私が得られたこの要件に最も近いのは、上に画像があり、そのすぐ下のタイトル（残りの縦のスペースの上）と残りの縦のスペースの中央の説明です。このCSSは次のようになります。

.flexbox-container { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

.flexbox-container .one-fourth { 
    background-color: #1E73BE; 
    margin: 10px 10px; 
    margin-bottom: 10px; 
    max-width: 25%; 
    padding-top: 0; 
    padding-left: 0; 
    padding-right: 0px; 
    display: flex; 
    flex-direction: column; 
} 

.flexbox-container .one-fourth .image-name, 
.flexbox-container .one-fourth .image-description { 
    color: #fff; 
    margin: 0; 
    text-align: center; 
} 

.image { 
    margin: 0; 
} 

.image-name { 
    flex: 1; 
} 

.image-description { 
    flex: auto; 
} 

誰もが私は必要なものを達成するために、これを修正する方法を知っていますか？

アップデート -は、ここでは、HTMLマークアップです：

<div class="flexbox-container"> 
    <div class="one-fourth"> 
     <p class="image"><img class="..."...></p> 
     <p class="image-name"></p> 
     <p class="image-description"></p> 
    </div> 
    <div class="one-fourth"> 
     <p class="image"><img class="..."...></p> 
     <p class="image-name"></p> 
     <p class="image-description"></p> 
    </div> 
    <div class="one-fourth"> 
     <p class="image"><img class="..."...></p> 
     <p class="image-name"></p> 
     <p class="image-description"></p> 
    </div> 
    <div class="one-fourth"> 
     <p class="image"><img class="..."...></p> 
     <p class="image-name"></p> 
     <p class="image-description"></p> 
    </div> 
</div> 
<div class="flexbox-container"> 
    <div class="one-fourth"> 
     <p class="image"><img class="..."...></p> 
     <p class="image-name"></p> 
     <p class="image-description"></p> 
    </div> 
    <div class="one-fourth"> 
    ...and so on. 

Answer 1

これはネイティブフレキシボックスを持つことはできません。

"中心の"アイテムを残りの高さを占める独自の要素にラップし、内容を中央に配置する必要があります。また、列に定義された高さを与える必要があります... または少なくともブラウザが調整できる高さ。

* { 
 
    margin: 0; 
 
} 
 
.column { 
 
    width: 50%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 300px; 
 
    margin: auto; 
 
    border: 1px solid grey; 
 
} 
 
.img-wrap { 
 
    text-align: center; 
 
} 
 
.wrap { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    text-align: center; 
 
    background: pink; 
 
}

<div class="column"> 
 
    <div class="img-wrap"> 
 
    <img src="http://www.fillmurray.com/140/100" alt="" /> 
 
    </div> 
 
    <div class="wrap"> 
 
    <h2 class="title">Title</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, fugiat.</p> 
 
    </div> 
 
</div>

行として

* { 
 
    margin: 0; 
 
} 
 
.row { 
 
    display: flex; 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 
.column { 
 
    padding: 1em; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid grey; 
 
} 
 
.img-wrap { 
 
    text-align: center; 
 
} 
 
.wrap { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    text-align: center; 
 
    background: pink; 
 
}

<div class="row"> 
 
    <div class="column"> 
 
    <div class="img-wrap"> 
 
     <img src="http://www.fillmurray.com/140/100" alt="" /> 
 
    </div> 
 
    <div class="wrap"> 
 
     <h2 class="title">Title</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, fugiat.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="img-wrap"> 
 
     <img src="http://www.fillmurray.com/140/100" alt="" /> 
 
    </div> 
 
    <div class="wrap"> 
 
     <h2 class="title">Title</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ad non fuga cumque accusamus tempore obcaecati nihil reprehenderit suscipit, voluptas doloremque nostrum doloribus maxime? Possimus. Lorem ipsum dolor sit amet, consectetur adipisicing 
 
     elit. Quis, veniam!</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ここに私の解決策です。

ちょうどあなたが要素を中心にするために成長するスペースを必要とする余裕自動で遊ぶ：外に整列」あなたは意味ですか「コンテナの上に」によって

.flexbox-container { 
 
    display: flex; 
 
    width: 600px; 
 
} 
 
.flexbox-container .one-fourth { 
 
    background-color: lightblue; 
 
    width: 20%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 2px; 
 
} 
 
.image { 
 
    background-color: blue; 
 
    margin: 0px; 
 
} 
 
.one-fourth:nth-child(1) .image { 
 
    height: 50px; 
 
} 
 
.one-fourth:nth-child(2) .image { 
 
    height: 75px; 
 
} 
 
.one-fourth:nth-child(3) .image { 
 
    height: 100px; 
 
} 
 
.one-fourth:nth-child(4) .image { 
 
    height: 125px; 
 
} 
 
.image-name { 
 
    height: 30px; 
 
    background-color: green; 
 
    margin: auto 0 0 0; 
 
} 
 
.image-description { 
 
    height: 80px; 
 
    background-color: tomato; 
 
    margin: 0 0 auto 0; 
 
}

<div class="flexbox-container"> 
 
    <div class="one-fourth"> 
 
    <p class="image"></p> 
 
    <p class="image-name"></p> 
 
    <p class="image-description"></p> 
 
    </div> 
 
    <div class="one-fourth"> 
 
    <p class="image"></p> 
 
    <p class="image-name"></p> 
 
    <p class="image-description"></p> 
 
    </div> 
 
    <div class="one-fourth"> 
 
    <p class="image"></p> 
 
    <p class="image-name"></p> 
 
    <p class="image-description"></p> 
 
    </div> 
 
    <div class="one-fourth"> 
 
    <p class="image"></p> 
 
    <p class="image-name"></p> 
 
    <p class="image-description"></p> 
 
    </div> 
 
</div>