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

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 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

, I think you'll be fine. The

will display as a block level element until you choose otherwise.

  
  

    

      
Text fields will go here
      
and here
    
  
 

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

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...