Как расположить элементы каждый на отдельной строке?

Question

[Fobos94]

Необходимо, чтобы каждый элемент начинался с новой строки.

Как должно быть:

В итоге выходит:

display: flex;
display: -webkit-flex;
display: -o-flex;
display: -moz-flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 800px;
width: 100%;
margin: 10px auto;
padding: 10px;

<div class="block">
    <img class="avatar" src="http://animeplus.by/uploads/fotos/foto_1.jpg" alt="">
   <div class="media-main">
    <span class="title">written by</span>
    <a class="name">Levis Daniel Day</a>
   </div>
  </div>

Comments

[Александр]

Не используйте flexbox там, где он не нужен. Здесь можно обойтись inline-block и white-space nowrap

Answer 1

[alvvi]

.title {
  display: block;
}

.name {
  display: block;
}

Comments

[Fobos94]

Благодарю!

Answer 2

[Егор Живагин]

Или так:

.media-main{
  display: flex;
  flex-direction: column;
}

Comments

[Fobos94]

Благодарю!

Answer 3

[Александр Пашкевич]

Вот по разметке сделал так.
jsfiddle
Только шрифты надо поправить.
А вообще вот отдельно css код(в фиддле scss)

.block {
  display: flex;
  display: -webkit-flex;
  display: -o-flex;
  display: -moz-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 800px;
  width: 100%;
  margin: 10px auto;
  padding: 10px;
}
.block img {
  border-radius: 50%;
  margin-right: 2em;
}
.block .media-main {
  display: flex;
  flex-direction: column;
}