使用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是构建布局的工具。