親ヘッダーに従ってコンテンツを右揃えにします

Question

フレックスボックスを使用してテーブルを作成していますが、整列の問題が発生しました。自分のコンテンツを右揃えにしたいのですが、ヘッダーを中央に配置することができます。

例

____________ 
| Test | 
|----------| 
|  $1 | 
|----------| 
| $312 | 
|----------| 

は、ここで私はJSfiddleに持つ構造例、私はフレキシボックスを使用してこれを達成することができますどのように任意のアイデアをですか？

Answer 1

https://jsfiddle.net/04Lzxqun/2/ ディスプレイを削除します。 justify-content：flex-end; から 。親部門

.table{ 
    display: flex; 
    flex-direction: row; 
} 
.parent{ 
    flex-direction: column; 
    border: 1px solid black; 
    flex-basis: 1 0 50px; 
    width: 100%; 
} 

.parent div { 
    border: 1px solid black; 
} 
.parent span{ 
    text-align: left !important; 
} 
.parent .header{ 
    text-align: center !important; 
} 

.header { 
    background-color: blue; 
} 

.empty{ 
    visibility: hidden; 
}