使用flexbox內嵌兩個元素

Question

我想使用flexbox將兩個元素彼此相鄰。我希望這個工作完全像display: inline作品，但對於flexbox。你會如何做到這一點？我錯過了什麼？ :)

演示：https://jsfiddle.net/24duh8wr/

Answer 1

如果你想在第二項中的文本換行周圍文本它的第一個項目，Flexbox的不是實現這一目標的方式。你有兩個選擇（從容器中取出display: flex在這兩種情況下）：

1）只要讓他們在線：

.item { 
    display: inline; 
} 

2）浮動的第一項左：

.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來做到這一點。 Flexbox是構建佈局的工具。