2017-08-16 11 views
1

私は動的アプリケーションで作業しています。 flex-direction:columnプロパティを持つdivタグがあります。そのdiv内のspanタグをテキストの並びと平行して追加することは可能ですか?フレックスプロパティでHtml要素をインラインに整列

.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
}
<div class="parent"> 
 
    Item 1 
 
    <span style="border: 1px solid;">item 2</span> 
 
</div>

しかし、改行して表示するテキスト。 1つの重要なことは、クラス '.parent'を編集していないことです。

+0

は、私はあなたが欲しいの青写真を見ることができますか? – zynkn

+1

'column'方向のフレックスコンテナは子要素(アンラップしたテキストのような無名要素を含む)を垂直に積み重ねます。コンテナスタイルを編集できない場合、水平方向の配置のための唯一のflexオプションは、 'row'方向の入れ子のフレックスコンテナに子要素をラップすることです。 –

答えて

1

あなたはこれを試すことができます。

body{ 
 
    display: flex; 
 
} 
 
.parent { 
 
    flex: 1 1; 
 
    flex-direction: column; 
 
}
<div class="parent"> 
 
    Item 1 
 
    <span style="border: 1px solid;">item 2</span> 
 
</div>

+0

'.parent'クラスを変更することはできません。 –

関連する問題