我无法将这些卡片放在页脚、页眉和侧边栏之间

Question

空白的 space（您在输入代码时会看到）是卡片应按这样的方向堆叠成一列的位置

我正尝试以这种方式用卡片填充白色 space，但侧边栏一直将其向下推，我尝试合并它们并创建不同的 div 来分隔，但无论它位于下方的是什么我不知道为什么。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.Cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 0;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}

<div class="header">
  MY AWESOME WEBSITE
</div>

<div class="contents">

  <div class="sidebar">
    <a href="google.com">⭐ - link one</a>
    <a href="google.com">‍♂️ - link two</a>
    <a href="google.com">️ - link three</a>
    <a href="google.com"> - link four</a>
  </div>
  <div class="Cards">
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
    <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  </div>
</div>
<div class="footer">
  The Odin Project ❤️
</div>

如果只使用 flexbox 找到解决方案，我更愿意，没有边距或任何东西。

Answer 1

这可以使用 Grid 布局轻松完成。刚刚将 contents 容器更改为 flex 并将 grid 用于卡片容器。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.contents {
  display: flex;
}

.Cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
  padding: 12px;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
  padding: 12px;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Holy Grail</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    MY AWESOME WEBSITE
  </div>

  <div class="contents">

    <div class="sidebar">
      <a href="google.com">⭐ - link one</a>
      <a href="google.com">‍♂️ - link two</a>
      <a href="google.com">️ - link three</a>
      <a href="google.com"> - link four</a>
    </div>
    <div class="Cards">
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
      <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    </div>
  </div>
  <div class="footer">
    The Odin Project ❤️
  </div>
</body>

</html>

Answer 2

使用 flex 属性 Wrapping !! flex-wrap：换行；使用这个你的白卡会自动掉线。

Answer 3

使用请求的解决方案 flex。在这种情况下，您必须在主要父级上设置 flex .contents。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.contents {
  display: flex;
}

.Cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 0;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}

<div class="header">
  MY AWESOME WEBSITE
</div>

<div class="contents">

  <div class="sidebar">
    <a href="google.com">⭐ - link one</a>
    <a href="google.com">‍♂️ - link two</a>
    <a href="google.com">️ - link three</a>
    <a href="google.com"> - link four</a>
  </div>
  <div class="Cards">
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
    <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  </div>
</div>
<div class="footer">
  The Odin Project ❤️
</div>

我无法将这些卡片放在页脚、页眉和侧边栏之间

I am having troubles fitting these cards in between the footer, header and sidebar

html

css

flexbox