CODEWITHSUNDEEP
cssflexbox
user2545642
user2545642

Reputation: 345

Inline two elements using flexbox

I want to inline two elements next to each other using flexbox. I want this to work exactly like display: inline works but for flexbox. How would you do this? What am I missing? :)

Demo: https://jsfiddle.net/24duh8wr/

Upvotes: 1

Views: 4119

Answers (4)

Aksana Tolstoguzova
Aksana Tolstoguzova

Reputation: 369

It's not possible to do it with flexbox, if I understand your expectation http://take.ms/sLdMr . Flexbox is tool to build layout.

Upvotes: 1

keithjgrant
keithjgrant

Reputation: 12769

If you want the text in the second item to wrap around the text it the first item, flexbox is not the way to achieve this. You have two options (remove display: flex from the container in both cases):

1) Just make them inline:

.item {
  display: inline;
}

2) Float the first item left:

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

Upvotes: 1

Alexis
Alexis

Reputation: 5831

As explained in the commentary. Use 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>

Upvotes: 0

itacode
itacode

Reputation: 3787

Please try display: inline-flex;

Upvotes: 0

Related Questions