Flexbox alignment with images and text inside same container

Question

I am making a flexbox Employee ID card layout. The employee\'s picture will go to the left and the employee\'s info (name, employee-id, department, etc) will go to the right of

Answer 1

Just wrap your info in a container set to display: inline-block:

HTML

<div class="flex-item">
    <img src="http://placehold.it/100x100"/>
    <div class="info-container">
       <p>Field 1</p>
       <p>Field 2</p>
       <p>Field 3</p>
    </div>
</div>

CSS

.info-container{
   display: inline-block;
   vertical-align: top;
   padding: 0 0 0 5px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.info-container p{
    padding: 0;
    margin: 0 0 10px;
}

FIDDLE

Answer 2

The most unobtrusive approach which I found was to add this:

.flex-item {
    display:flex;
    align-items: center;
}
.flex-item img{
    flex-grow:0;
    flex-shrink:0;
}

If you add multiple <span> immediately after the img, they'll continue displaying in row fashion (like a float). This may not be the what you want, though. One option could be to set each item to a fixed width - but that breaks the spirit of flexbox.

But if you modify your text wrapper to contain a single <div>, I think you'll be fine. The <div> will display as a block level element until you choose otherwise.

<div class="flex-item">
  <img src="http://placehold.it/100x100">
  <div>
    <ul>
      <li>Text fields will go here</li>
      <li>and here</li>
    </ul>
  </div>
 </div>

Here's a fork of your fiddle where I did this. http://jsfiddle.net/Paceaux/7fcqkb50/1/