justify-content: flex-start 不工作答案

【问题标题】：justify-content: flex-start is not workingjustify-content: flex-start 不工作
【发布时间】：2018-06-06 21:05:07
【问题描述】：

我试图将网站中的所有元素对齐，以使一行中最多有 3 个元素，并让它们向左对齐。

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

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

我的代码

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%;
}

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

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

更新：

通过删除两个边距语句解决了问题，一个在 .blog 中，一个在 .blog-container 中

感谢您的帮助。

【问题讨论】：

尝试在.blog上删除margin: 2% auto
如果你在课堂上有justify-content: flex-start .blog-container 你为什么要添加margin: 0 auto; 这两个相互矛盾！！
@Adam 我试图将容器放在页面的中心，以便有条理的页面外观。
但你不能两者兼得！这无助于解决问题
@Adam 这是 flex 的另一个很酷的特性，但我想做的是将博客容器保持在屏幕的中心，而不是把整个东西放在左边。我通过将 blog-container 包含到一个 div 中并让这个 div 显示 flex 来完成它。

标签： html css ruby-on-rails flexbox

【解决方案1】：

通过删除两个边距语句解决了问题，一个在 .blog 一个在 .blog-container 中

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

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

【讨论】：

我只是一个 StackOverflow 初学者。如果有更好的方法将问题标记为已回答，请告诉我@JasonMcFarlane。我使用未回答的列表来查找要回答的问题，但为了找出用户已经有答案而阅读所有内容令人失望。