如何在 Holy Grail 布局的主要内容中放置 4 个居中的 flexboxes，上面和下面都有文本？

Question

我可以制作基本的 Holy Grail 布局，但是一旦涉及到将盒子放在盒子里，事情就会分崩离析。我看过代码进行比较，但是这种特定的布局似乎并不常见。

我想要做的是在网页的主要内容中有 4 个 flexboxes。方框上方是 header，下面可能是一个段落。在 flexboxes 下是每个的描述，它居中并与 flexbox 对齐。 flexboxes 将保存一张图片，但现在这并不重要。

}
html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 1.1em;
    text-align: center;
    color: #FFF;
}
.holy-grail header,
.holy-grail footer,
.hg-sidebar,
.holy-grail-content {
    padding: 20px;
}
.holy-grail header,
.holy-grail footer {
    background: #0c31aa;
}
.hg-sidebar {
    background: #b7d3ec;
}
.holy-grail-content {
    color: #777;
}

.holy-grail {
    min-height: 100vh;
}
.holy-grail,
.holy-grail-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.holy-grail-content {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
@media (min-width: 768px) {
    .holy-grail-sidebar-1 {
        order: -1;
    }
    .holy-grail-body {
        flex-direction: row;
    }
    .hg-sidebar {
        flex: 0 0 260px;
    }

.block {
    border: solid;
    border-color: cornflowerblue;
    width: 200px;
    height: 200px;
    font-size: 48px;
    text-align: center;
}

.mc {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 1

你可以把那些div的卡插在其他主卡里面div

我尝试使用另一个div来存储

来快速解决它

为卡片header
段落
卡片
卡片描述

html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 1.1em;
    text-align: center;
    color: #FFF;}
html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 1.1em;
    text-align: center;
    color: #FFF;
}
.holy-grail header,
.holy-grail footer,
.hg-sidebar,
.holy-grail-content {
    padding: 20px;
}
.holy-grail header,
.holy-grail footer {
    background: #0c31aa;
}
.hg-sidebar {
    background: #b7d3ec;
}
.holy-grail-content {
    color: #777;
  flex: 1 1 auto;
    display: flex;
    justify-content: center;
  /*Add this line*/
  flex-direction: column;
}

.holy-grail {
    min-height: 100vh;
}
.holy-grail,
.holy-grail-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
@media (min-width: 768px) {
    .holy-grail-sidebar-1 {
        order: -1;
    }
    .holy-grail-body {
        flex-direction: row;
    }
    .hg-sidebar {
        flex: 0 0 260px;
    }

.block {
    border: solid;
    border-color: cornflowerblue;
    width: 200px;
    height: 200px;
    font-size: 48px;
    text-align: center;
}

.mc {
    display: flex;
    justify-content: center;
    align-items: center;
}
  
  .card-with-header-and-desc-container {
 text-align: center;
    width: 200px;
    /*height: 200px;*/
    
  }
  
   .card-with-header-and-desc-container__header {
 font-weight: 700;
     font-size: 1.5rem
  }
  
  .card-with-header-and-desc-container__sub {
 font-weight: 500;
     font-size: 1.1rem
  }
  
  .extra-text{
    margin: 0 10px;
  }
}
.holy-grail header,
.holy-grail footer,
.hg-sidebar,
.holy-grail-content {
    padding: 20px;
}
.holy-grail header,
.holy-grail footer {
    background: #0c31aa;
}
.hg-sidebar {
    background: #b7d3ec;
}
.holy-grail-content {
    color: #777;
}

.holy-grail {
    min-height: 100vh;
}
.holy-grail,
.holy-grail-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.holy-grail-content {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
@media (min-width: 768px) {
    .holy-grail-sidebar-1 {
        order: -1;
    }
    .holy-grail-body {
        flex-direction: row;
    }
    .hg-sidebar {
        flex: 0 0 260px;
    }

.block {
    border: solid;
    border-color: cornflowerblue;
    width: 200px;
    height: 200px;
    font-size: 48px;
    text-align: center;
}

.mc {
    display: flex;
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<body class="holy-grail">
  <!--<body class="holy-grail">-->
  <header>
    <p>Header</p>
  </header>
  <div class="holy-grail-body">

    <section class="holy-grail-content">
      <h1>Main content</h1>
      <div class="mc">
        <div class="card-with-header-and-desc-container">
          <p class="card-with-header-and-desc-container__header">Some header</p>
          <p class="card-with-header-and-desc-container__sub">maybe a paragraph</p>
          <div class="block block1">1
          </div>
          <p>Description of each card Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
        </div>

        <p class="extra-text">Whats</p>

        <div class="card-with-header-and-desc-container">
          <p class="card-with-header-and-desc-container__header">Some header</p>
          <p class="card-with-header-and-desc-container__sub">maybe a paragraph</p>
          <div class="block block2">2
          </div>
          <p>Description of each card Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
        </div>

        <p class="extra-text">In</p>

        <div class="card-with-header-and-desc-container">
          <p class="card-with-header-and-desc-container__header">Some header</p>
          <p class="card-with-header-and-desc-container__sub">maybe a paragraph</p>
          <div class="block block3">3
          </div>
          <p>Description of each card Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
        </div>

        <p class="extra-text">The</p>

        <div class="card-with-header-and-desc-container">
          <p class="card-with-header-and-desc-container__header">Some header</p>
          <p class="card-with-header-and-desc-container__sub">maybe a paragraph</p>
          <div class="block block4">4
          </div>
          <p>Description of each card Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
        </div>

        <p class="extra-text">Box?</p>
      </div>
    </section>

    <div class="holy-grail-sidebar-1 hg-sidebar">
      <p>Sidebar 1</p>
    </div>

    <div class="holy-grail-sidebar-2 hg-sidebar">
      <p>Sidebar 2</p>
    </div>

  </div>

  <footer>
    <p>Footer</p>
  </footer>
</body>

</html>

Example applied

如果这不能解决您的问题，请考虑添加一些图片来展示您的预期设计。

如何在 Holy Grail 布局的主要内容中放置 4 个居中的 flexboxes，上面和下面都有文本？

How can I put 4 centered flexboxes with text above and below inside the main content of the Holy Grail layout?

html

css

flexbox

alignment