フレキシボックスの中央と右下の項目

Question

私はフレキシボックスを使用して次の結果を達成しようとしている：

私は、次のHTMLを試みたが、私はそれを動作させることはできません。

<div class=" flex-center"> 
    <div class="flex-item-center"> 
     <p> 
      Some text in box A 
     </p> 
    </div> 
    <div class="flex-item-bottom"> 
     <p>Some text in box B....</p> 
    </div> 
</div> 

CSS：

.flex-center { 
    display: flex; 
    align-items: center; 
    align-content: center; 
    justify-content: center; 
} 
.flex-item-center { 
    align-self: center; 
} 

.flex-item-bottom { 
    align-self: flex-end; 
} 

どのように私はそれが画像のように見せることができますか？

Answer 1

私がかのうソリューションを作りました。

.flex-center { 
 
    background-color: #739FD0; 
 
    color: #000000; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-content: center; 
 
    align-items: center; 
 
    height: 400px; 
 
} 
 
.flex-center-bottom { 
 
    background-color: #739FD0; 
 
    color: #000000; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-end; 
 
    align-content: center; 
 
    align-items: center; 
 
} 
 
.flex-item-center { 
 
    border: solid 2px #4675AA; 
 
    order: 0; 
 
    flex: 0 1 auto; 
 
    align-self: center; 
 
} 
 
.flex-item-bottom { 
 
    border: solid 2px #4675AA; 
 
    order: 1; 
 
    flex: 0 1 auto; 
 
    align-self: flex-end; 
 
}

<div class="flex-center"> 
 
    <div class="flex-item-center"> 
 
    <p>DROP FILES HERE</p> 
 
    </div> 
 
</div> 
 
<div class="flex-center-bottom"> 
 
    <div class="flex-item-center"> 
 
    <p>Hint: You can also drop files in the all files page</p> 
 
    </div> 
 
</div>

更新2017：はGoogleのクロムバージョン62.0.3202.89（oficialビルド）（32ビット）でテストしました。

.flex-center, 
 
.flex-center-bottom { 
 
    align-items: center; 
 
    background-color: #739FD0; 
 
    color: #000000; 
 
    display: flex; 
 
} 
 

 
.flex-center { 
 
    height: 400px; 
 
    justify-content: center; 
 
} 
 

 
.flex-center-bottom { 
 
    justify-content: flex-end; 
 
} 
 

 
.flex-item-center { 
 
    border: solid 2px #4675AA; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 1.6em; 
 
    line-height: 1px; 
 
    padding: 0 3px; 
 
}

<div class="flex-center"> 
 
    <div class="flex-item-center"> 
 
    <p>Some text in box A</p> 
 
    </div> 
 
</div> 
 
<div class="flex-center-bottom"> 
 
    <div class="flex-item-center"> 
 
    <p>Some text in box B...</p> 
 
    </div> 
 
</div>

私はこれがあなたを助け願っています。

Answer 2

これはあなたが探しているものですか？ http://jsfiddle.net/DIRTY_SMITH/q12bh4se/6/

body { 
    background-color: lightblue; 
} 

#main { 
    width: 100%; 
    height: 400px; 
    border: 1px solid black; 
    display: -webkit-flex; 
    /* Safari */ 
    -webkit-align-items: flex-start; 
    /* Safari 7.0+ */ 
    display: flex; 
    align-items: flex-start; 
} 

#main div { 
    -webkit-flex: 1; 
    /* Safari 6.1+ */ 
    flex: 1; 
} 

.flex-item-center { 
    margin-left: 40%; 
    border-style: solid; 
    -webkit-align-self: center; 
    /* Safari 7.0+ */ 
    align-self: center; 
} 

.flex-item-bottom { 
    border-style: solid; 
    align-self: flex-end; 
}