首先，让我推荐一些可以帮助您理解Flexbox概念的好资源：

• MDN上的Flexbox文档。
• MDN上flexbox的基本概念。
• MDN上的CSS灵活框布局。
• 在CSS-Tricks上使用Flexbox的完整指南。

现在，让我展示一个简单的尝试来完成您想要的设计，您可以在此基础上进行构建和修补。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 8px 20px;
  border: 2px solid red;
}
.logo-wrapper {
  text-align: center;
  margin-bottom: 20px;
  border: 2px solid red;
}
.logo-wrapper .logo {
  max-width: 100%;
  max-height: 50px;
  vertical-align: middle;
  object-fit: cover;
}
.navbar {
  display: flex;
  list-style: none;
  margin-bottom: 15px;
  border: 2px solid red;
}
.navbar .nav-item {
  flex: 1 0 auto;
  text-align: center;
}
.main-page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 6px 15px;
  margin-bottom: 20px;
  border: 2px dashed red;
}
.main-page .main-area {
  flex-grow: 1;
  margin-bottom: 20px;
  padding: 8px;
  border: 2px solid red;
}
.main-page .cards-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
}
.main-page .cards-wrapper .card {
  flex: 0 0 30%;
  padding: 6px;
  border: 2px solid red;
}
footer {
  display: flex;
  flex-wrap: nowrap;
}
footer .footer-item {
  flex: 1 0 50%;
}
footer .date {
  text-align: right;
}

个字符
边框的设置只是为了直观地展示flexbox及其组件的工作方式，并概述每个部分，以便易于查看和理解。
就像我说的，这只是一个尝试，希望你们会发现它是有用的，它会让你们有自己的想法。
请记住，上面的代码片段并没有涵盖您在构建网站时可能需要记住的一些情况，例如响应性。
最后，我建议查看不同的CSS库和框架，如bootstrap，tailwind ...，并检查它们如何实现和使用自己的flexbox实用程序，因为我认为这将有助于您更好地了解flexbox的工作原理。

你可以参考这段代码，让我知道它的工作原理。我想我做的是正确的，将对你有用。谢谢。

body {
  background-color: white;
  font-family: 'Markazi Text', 'serif';
  text-align: center;
  /* display: flex; */
  /* flex-flow: column wrap; */
  /* justify-content: stretch; */
}
header img {
  width: 25%;
  border: 2px solid black;
  margin: 20px auto;
}
nav ul {
  list-style: none;
  background-color: grey;
  display: grid;
  grid-template-columns: repeat(4, 300px);
  width: 80%;
  margin: 20px auto;
}
nav li a {
  text-decoration: none;
}
nav li {
  padding: 20px;
  /* flex-basis: auto; */
}
main {
  border: 2px solid black;
  margin: auto;
  width: 70%;
}
section {
  display: flex;
  width: 70%;
  margin: auto;
  gap: 50px;
}
section div {
  display: flex;
  border: 2px solid black;
  height: 150px;
  margin: 20px auto;
  width: 33%;
  /* width: 50%; */
}
footer {
  display: flex;
  /* border: 2px solid black; */
  margin: auto;
  width: 80%;
  gap: 10px;
}
.foot {
  border: 2px solid black;
  margin: auto;
  width: 80%;
}

个字符