Как добиться этого макета?(изображение слева и текст справа)

Question

Я хочу иметь макет с изображением слева и справа текста.Текст должен иметь такую ​​структуру:

Item 0: value 0
Item 1: value 1
Item 2: value 2

Но этот текст появляется только в одной строке, например:

Элемент 0: значение 0 Элемент 1: значение 1 Элемент 2: значение 2

Знаете ли вы, почему?

Задайте вопрос: http://jsfiddle.net/Lwu2zxzd/

HTML:

<div class="text-center">
  <div class="d-flex flex-row justify-content-center align-items-center">
    <img src="http://via.placeholder.com/100x100"/>
    <p><strong class="text-bg-gray">Item1: </strong>value1</p>
    <p><strong class="text-bg-gray">Item2: </strong>valu2</p>
    <p><strong class="text-bg-gray">Item3: </strong>value3</p>
  </div>
</div>

Answer 1

Это связано с тем, что теги p являются гибкими элементами контейнера flex, а поскольку вы использовали flex-row, у вас будет этот вывод.Чтобы исправить это, вы можете добавить еще один div для переноса текста:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="text-center">
  <div class="d-flex flex-row justify-content-center align-items-center">
    <img src="http://via.placeholder.com/100x100" >
    <div>
      <p class="mb-0"><strong class="text-bg-gray">Item1: </strong>value1</p>
      <p class="mb-0"><strong class="text-bg-gray">Item2: </strong>value2</p>
      <p class="mb-0"><strong class="text-bg-gray">Item3: </strong>value3</p>
    </div>
  </div>
</div>