Question

我想使用flexbox将两个元素内联在一起。我希望这个工作与display: inline完全一样，但对于flexbox。你会怎么做？我错过了什么？：）

演示：{{3}}

Answer 1

如果您希望第二项中的文本将包围文本作为第一项，则flexbox不是实现此目的的方法。您有两个选项（在两种情况下都从容器中删除display: flex）：

1）只需将它们内联：

.item { display: inline; }

2）浮动第一个项目：

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

Answer 2

如果我理解你的期望http://take.ms/sLdMr，就不可能使用flexbox。 Flexbox是构建布局的工具。

Answer 3

请尝试display: inline-flex;

Answer 4

如评论中所述。使用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>

使用flexbox内联两个元素

4 个答案: