フレックスボックスでhtmlルールに従っているときに縦横に中心を合わせる

Question

フレックスボックスを使ってブートストラップのjumbotronクラスに似たものを作ろうとしています。私はすべてを縦横に中央に揃えたいと思っていますが、ボックスの内部にある何でも標準のHTMLルールを尊重したいと思っています。つまり、<h1>を作成して<h4>とすると、それらを別々の行に入れたいと思っています。しかし、私の現在のflexboxのプロパティでは、それは起こっていません。以下の例を参照してください - 親が中心のフレックスになるようにするには、それらの要素をラップするための新しい、非フレックス親を導入することができtitlesubtitleのような代わりのtitle\nsubtitle

.Jumbotron { 
 
    height: 300px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
}

<div class="Jumbotron"> 
 
    <h1>title</h1> 
 
    <h4>subtitle</h4> 
 
</div>

Answer 1

に見えます子供、そしてそれは、子どもたちが普通、非フレックス子供

.Jumbotron { 
 
    height: 300px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
}

<div class="Jumbotron"> 
 
    <div> 
 
    <h1>title</h1> 
 
    <h4>subtitle</h4> 
 
    </div> 
 
</div>

0123になります

またはあなたたとえば、あなただけのフレックス親の子どもたちが自分の行になりたい場合は、 `以来、既存のマークアップでは動作しませんflex-direction: column;

.Jumbotron { 
 
    height: 300px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
}

<div class="Jumbotron"> 
 
    <h1>title</h1> 
 
    <h4>subtitle</h4> 
 
</div>