Question

我试图将网站中的所有元素对齐，连续最多包含3个元素，并将它们对齐到左边。

但我得到了以下结果。 (website image)

我使用Ruby on Rails创建了这个网站，因此可能很难为某些人实现代码。

我的代码

＆＃13;

h1 {
  text-align: center;
}

footer {
  text-align: center;
}

.blog {
  border: 4px solid black;
  border-radius: 10px;
  background-color: lightgray;
  text-align: center;
  margin: 2% auto;
  padding: 10px;
  min-width: 33%;
  max-width: 33%;
  overflow: auto;
}

.blog-container {
  display: flex;
  flex-flow: row wrap;
  width: 80%;
  margin: 0px auto;
  justify-content: flex-start;
}

.new-blog-form {
  margin: 0px 30%;
}

.text-area {
  width: 100%;
  height: 400px;
}

.title-input {
  width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>
<title>My Blog</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>
  <h1>My Blogs</h1>
  <div class="blog-container">
    <% @blogs.each do |blog| %>
      <div class="blog">
        <p class="title">
          <%= blog.title %>
        </p>
        <p class="time">
          <%= blog.created_at %>
        </p>
        <%= link_to 'Learn More', blog_path(blog), class: "btn btn-info" %>
      </div>
      <% end %>
  </div>
  <footer>
    <%= link_to 'New Blog', '/blogs/new', class: "btn btn-primary" %>
  </footer>
</body>

</html>

＆＃13;

任何建议对我都有帮助。谢谢。

更新

通过删除两个保证金报表解决了这个问题，一个在.blog中，一个在.blog-container

感谢您的帮助。

Answer 1

通过删除两个保证金报表来解决问题，一个在.blog中和.blog-container中的一个

我不知道你是否可以回答你自己的问题。如果没有，我在这里发布您的答案，以便您可以将此问题标记为已回答。感谢。

https://stackoverflow.com/help/someone-answers

justify-content：flex-start不起作用

1 个答案: