如何在 flex 元素之后创建新行？

Question

我正在尝试在我的网站上添加不同帖子的列表。所以我创建了不同的 div 并向其中添加了图像和一些文本。但问题是：

我希望标题在最上面，然后它下面和底部的文本应该是重定向。

这是我的 index.php:

<body>
    <header>
      
<!-- The header is not important (would be too much code) -->

    </header>

    <div class="blog-post">
        <div class="blog-post_img">
          <img id="newyork" src="../../../../img/newyork.jpg" alt="New York wurde nicht gefunden!">
        </div>
        <div class="blog-post_info">

        </div>
        <h1 class="blog-post_title">New York</h1>
        <p class="blog-post_text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <a href="new-york/" class="blog-post_cta">Mehr..</a>
    </div>
  </body>

还有我的style.css：

html{font-family: 'Roboto', sans-serif;;}

body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  background-color: #f5f5f5;
}

.blog-post{
  width: 100%;
  max-width: 58rem;
  padding: 5rem;
  max-height: 18rem;
  background: white;
  box-shadow: 0 1.4rem 8rem rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
}

.blog-post_img{
  min-width: 35rem;
  max-width: 35rem;
  transform: translateX(-8rem);
  position: relative;
}

.blog-post_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .8rem;
  display: block;
}

.blog-post_img::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: .5rem .5rem 3rem 1px rgba(0, 0, 0, .05);
  border-radius: .8rem;
}

我已尝试将 display: flex 更改为其他类型的显示，但其中 none 的显示效果如我所愿。

希望你能帮帮我！如果有遗漏的信息，请告诉我。

丹尼尔.

Answer 1

需要这样的结果吗？我创建了一个 blog-post-content class 用它包装 post 内容。

html{font-family: 'Roboto', sans-serif;}

body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  background-color: #f5f5f5;
}

.blog-post{
  width: 100%;
  max-width: 58rem;
  padding: 5rem;
  max-height: 18rem;
  background: white;
  box-shadow: 0 1.4rem 8rem rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
}

.blog-post_img{
  min-width: 35rem;
  max-width: 35rem;
  transform: translateX(-8rem);
  position: relative;
}

.blog-post_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .8rem;
  display: block;
}

.blog-post_img::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: .5rem .5rem 3rem 1px rgba(0, 0, 0, .05);
  border-radius: .8rem;
}

.blog-post-content {
  display: flex;
  flex-direction: column;
}

<body>
    <header>
      
<!-- The header is not important (would be too much code) -->

    </header>

    <div class="blog-post">
        <div class="blog-post_img">
          <img id="newyork" src="../../../../img/newyork.jpg" alt="New York wurde nicht gefunden!">
        </div>
        <div class="blog-post_info">

        </div>
        <div class="blog-post-content">
        <h1 class="blog-post_title">New York</h1>
        <p class="blog-post_text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <a href="new-york/" class="blog-post_cta">Mehr..</a>
        </div>
    </div>
  </body>

如何在 flex 元素之后创建新行？

How can I create a new line after a flex element?

html

css

post

blogs