Я делаю макет флексбокса. Изображение сотрудника будет отображаться слева, а информация о сотруднике (имя, идентификатор сотрудника, отдел и т.д.) - справа от изображения в формате списка сверху вниз.
Мне нужно сделать это с помощью flexbox.
Вот ссылка на мой JSFiddle с тем, что я уже сделал:
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>