Flexbox align with images and text inside one container
I am making a flexbox layout. The employee image will be displayed on the left, and the employee information (name, employee ID, department, etc.) will be displayed on the right of the image in a top-down list format.
I need to do this with flexbox.
Here is a link to my JSFiddle with what I already did:
http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
min-width: 320px;
max-width: 1220px;
}
.flex-item {
height: 120px;
width: 300px;
background-color: #e46119;
border: 1px solid #626262;
margin: 3px;
padding: 10px 0 0 10px;
}
span {
padding-left: 5px;
}
<div class="flex-container">
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
</div>
Any help would be much appreciated. Thanks Jason
source to share
The most unobtrusive approach 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 several <span>
right after the img, they will continue to appear on the line (like float). However, this may not be what you want. One option might be to set each item to a fixed width, but that breaks the spirit of flexbox.
But if you change your text wrapper to one <div>
, I think you should be fine. <div>
will appear as a block-level element until you decide 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 is your violin fork where I made it. http://jsfiddle.net/Paceaux/7fcqkb50/1/
source to share
Just wrap your information 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;
}
source to share