フレックスボックスは、行に項目を表示しません

Question

速い質問。私は1つの項目として...

<div class="cont"> 
    <div class="1"> 
     <img src="sm1.png" alt="1" title="1" /> short_texttexttext 
    </div> 
    <div class="2"> 
     <img src="sm2.png" alt="2" title="2" /> short_texttexttext 
    </div> 
</div> 

は、画像上のような効果を達成するために...フレックス使用する

ちょうど中心部、中央部が、フレックス「マージ」画像とテキストをしようとしている：

IMGテキスト

IMGテキスト

と私がしたい：

IMGテキスト| IMGテキスト（中央）

唯一のオプションはdivを追加することですか？とんでもない！何か案は？

Answer 1

次のソリューションのいずれかを試すことができます：

は

ヒント：数字で始まるクラス名はCSSで許可されていません。クラス1と2の名前を変更する必要があります。ここで詳細：https://stackoverflow.com/a/449000/3840840

溶液＃1（次の画像へのテキスト）：

.cont { 
 
    background:yellow; 
 
    padding:20px; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    flex-direction:row; 
 
} 
 
.d1, .d2 { 
 
    background:red; 
 
    margin:10px; 
 
}

<div class="cont"> 
 
    <div class="d1"> 
 
    <img src="http://placehold.it/100x100" alt="1" title="1" /> short_texttexttext 
 
    </div> 
 
    <div class="d2"> 
 
    <img src="http://placehold.it/100x100" alt="2" title="2" /> short_texttexttext 
 
    </div> 
 
</div>

溶液＃2（画像の下にテキスト）：

.cont { 
 
    background:yellow; 
 
    padding:20px; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    flex-direction:row; 
 
} 
 
.d1, .d2 { 
 
    background:red; 
 
    margin:10px; 
 
    text-align:center; 
 
}

<div class="cont"> 
 
    <div class="d1"> 
 
    <img src="http://placehold.it/100x100" alt="1" title="1" /><br/> 
 
    short_texttexttext 
 
    </div> 
 
    <div class="d2"> 
 
    <img src="http://placehold.it/100x100" alt="2" title="2" /><br/> 
 
    short_texttexttext 
 
    </div> 
 
</div>