要素が縦並びにならない【CSS】

Question

写真のように、「hachi」の部分を上に、「こんにちは！」を下にしようと思い,flex-direction: column;を指定しました。しかし、横並びのまま、動きません。
もしたしたら、親要素にdisplay: flex;を指定していることが原因かもしれません。
よろしくおねがいします！

<div class="contents">
    <% @posts.each do |post| %>
      <div class="content">
        <img src="<%= post.user.image_name %>">
        <div class="texts">
          <%= link_to(post.user.name, "/users/#{post.user.id}") %>
          <%= link_to(post.content, "/posts/#{post.id}") %>
        </div>
      </div>
    <% end %>
  </div>

.content {
  background-color: white;
  width: 800px;
  margin: 0 auto;
  border: 1px solid #f5f5f5;
  display: flex;
}

.contents {
  margin-top: 20px;
}

.texts {
  font-size: 20px;
  margin: 20px;
  padding: 30px;
  width: 700px;
  margin: 0 auto;
  flex-direction: column;
}

ruby

Answer 1

.texts {
  display: flex; /* ←これを忘れているのでは？ */
  font-size: 20px;
  margin: 20px;
  padding: 30px;
  width: 700px;
  margin: 0 auto;
  flex-direction: column;
}

Comments

[aspot_0734]

なるほど、display: flex;で横並びにしたものをflex-direction: column;で並べ直すんですね！
解決しました。ありがとうございます！