flexboxを使用した2つの要素のインライン化

Question

flexboxを使用して2つの要素を隣り合わせにインライン化したいとします。私はdisplay: inlineのようにうまく動作するようにしたいが、フレックスボックスのためにしたい。あなたはどうしますか？私は何が欠けていますか？ :)

デモ：https://jsfiddle.net/24duh8wr/

Answer 1

あなたは2番目の項目のテキストが最初の項目それの周りにテキストを折り返すしたい場合は、フレキシボックスはこれを達成するための方法ではありません。次の2つのオプション（いずれの場合も、コンテナからdisplay: flexを削除）持っている：左

.item { 
    display: inline; 
} 

2）最初の項目をフロート：

1）だけでインラインそれらを作る

.item:first-child { 
    float: left; 
} 

Answer 2

display: inline-flex;

Answer 3

ようにしてみてくださいは解説で説明しました。 flex-directionを使用してください。

.flexbox {display: inline;} 
 
.flexbox2{ 
 
display:flex; 
 
flex-direction:row; 
 
}

<div class="flexbox"> 
 
    <div class="item">Date:</div> 
 
    <div class="item">Quisque rutrum. Vivamus laoreet. Aenean viverra rhoncus pede. Curabitur turpis. Morbi ac felis.In ut quam vitae odio lacinia tincidunt. Aenean ut eros et nisl sagittis vestibulum. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Praesent nonummy mi in odio.</div> 
 
</div> 
 
<hr> 
 
<div class="flexbox2"> 
 
    <div class="item">Date:</div> 
 
    <div class="item">Quisque rutrum. Vivamus laoreet. Aenean viverra rhoncus pede. Curabitur turpis. Morbi ac felis.In ut quam vitae odio lacinia tincidunt. Aenean ut eros et nisl sagittis vestibulum. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Praesent nonummy mi in odio.</div> 
 
</div>

Answer 4

をそうではありません私があなたの期待を理解すれば、フレックスボックスでそれをすることが可能ですhttp://take.ms/sLdMr。 Flexboxはレイアウトを構築するためのツールです。