it-swarm.com.ru

Выравнивание Flexbox с изображениями и текстом внутри одного контейнера

Я делаю макет флексбокса. Изображение сотрудника будет отображаться слева, а информация о сотруднике (имя, идентификатор сотрудника, отдел и т.д.) - справа от изображения в формате списка сверху вниз.

Мне нужно сделать это с помощью flexbox.

Вот ссылка на мой JSFiddle с тем, что я сделал до сих пор:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Flexbox Example 1</title>
    <style>
        .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;
        }
    </style>
</head>

<body>
    <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>
</body>
</html>

http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf

Любая помощь будет высоко ценится. Спасибо Джейсон

6
Jason Keith McCoy

Самый ненавязчивый подход, который я нашел, был добавить это:

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

Если вы добавите несколько <span> сразу после img, они будут продолжать отображаться в виде строк (например, с плавающей точкой). Это может быть не то, что вы хотите, хотя. Одним из вариантов может быть установка каждого элемента на фиксированную ширину, но это нарушает дух flexbox.

Но если вы измените текстовую оболочку так, чтобы она содержала один <div>, я думаю, у вас все будет хорошо. <div> будет отображаться как элемент уровня блока, пока вы не выберете другое. 

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

Вот вилка вашей скрипки, где я это сделал. http://jsfiddle.net/Paceaux/7fcqkb50/1/

10
paceaux

Просто оберните свою информацию в контейнере, установленном в 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;
}

СКРИПКА

2
jmore009