flexbox 和网格布局问题答案

【问题标题】：flexbox and grid layout questionsflexbox 和网格布局问题
【发布时间】：2021-01-29 11:46:27
【问题描述】：

我已经开始学习 html 和 css，但我在布局方面遇到了很大的问题，我尝试了 grid 和 flexbox。我想要实现的是：

我尝试使用哪种布局

遗憾的是，我的网站看起来像这样：

我的布局看起来像这样

现在这是我的代码，如果您愿意，请像向脑残一样解释，提前致谢，祝您有美好的一天。

    <!DOCTYPE html>

<html>
 <head>
  <meta charset="UTF-8"/>
  <meta name"viewport" content="width=device-width", initial-scale="1.0"/>
  <title>PE-ZONA.RO | WEBTOONS </title>
  <link rel="stylesheet" href="../css/styles.css"/>
  <link rel="stylesheet" href="../css/normalize.css"/>
 </head>

<body>
<!-- HEADER - ICONIȚE -->
<header>
 <div class="mhcon">
  <div class="mhconitem"><a href="#">PATREON</a></div>
  <div class="mhconitem2"><a href="#">DISCORD</a></div>
 </div>
</header>

<!-- SIDEBAR-NAVIGATIE -->
<aside>
   <nav>
     <div id="sidebar">
<ul>
 <li><a href="#">WEBTOONS</a></li>
 <li><a href="#">ECHIPĂ</a></li>
 <li><a href="#">ALĂTURĂ-TE</a></li>
 <li><a href="#">BLOG</a></li>
</ul>
  </div>
 </nav>
<aside>

<!-- WEBTOONS -->
<section>
 <div class="content">
  <div class="card">
    <h3>NUME WEBTOON1</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
  <div class="card">
    <h3>NUME WEBTOON2</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
  <div class="card">
    <h3>NUME WEBTOON3</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
 </div>
</section>

<!-- FOOTER -->
<footer>
 <div class="footercon">
  <p>Copyright @ pe-zona.ro</p>
 </div>
</footer>
</body>
</html>



   /* ARTICOLE */
.card {
  background-color: #c4c4;
  margin: 20px;
  padding: 20px;
  border: 6px solid #c5c5;
}


/* CONTAINER MENIU HEADER */
.mhcon {
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  border: 1px solid red;
  order: 1;
  flex: 1;
}

/* PATREON BUTTON */
.mhconitem {
  margin: 25px 15px;
  padding: 20px;
  width: 200px;
  text-align: center;
  background-color: #f07167;
  border-radius: 4px;
  border: none;
}

.mhconitem a {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  text-decoration: none;
}


/* DISCORD BUTTON */
.mhconitem2 {
  margin: 25px 15px;
  padding: 20px;
  width: 200px;
  text-align: center;
  background-color: #6a4c93;
  border-radius: 4px;
  border: none;
}

.mhconitem2 a {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  text-decoration: none;
}

/* CONTAINER SIDEBAR */
#sidebar {
 background-color: black;
 height: 100vh;
 width: 25vh;
 display: flex;
 flex: 1;
}

/* CONTAINER CONTENT */
.content {
  display: flex;
  justify-content: flex-end;
  flex: 2;
}

/* CONTAINER FOOTER */
.footercon {
  display: flex;
  justify-content: flex-end;
}

.footercon p {
  justify-content: center;
}

【问题讨论】：

我已经为你创建了一个网格布局。请多多益善。如果有帮助，请通过单击我的答案左侧的勾号图标来接受答案。这将帮助其他有相同网格问题的编码人员。

标签： html css flexbox css-grid

【解决方案1】：

使用CSS-Grids，你的布局就准备好了:)

CSS-Grids 提供了很大的灵活性来创建这样的布局，而不是通过使用弹性盒。

CODEPEN 链接： https://codepen.io/emmeiWhite/pen/abmEBgP

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
}
body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  height: 90vh;
  width: 90vw;
  margin: 1rem auto;
  gap: 1rem;

  grid-template-areas:
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside footer footer footer"
    "aside footer footer footer";
}

aside,
header,
footer,
section {
  border: 1px solid #ccc;
}
aside {
  grid-area: aside;
}

section {
  grid-area: section;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  padding: 2rem;

  grid-template-areas:
    " header header header"
    "content content content"
    "content content content"
    "content content content"
    "content content content"
    "content content content";
}

header {
  grid-area: header;
  border: none;
}

header .mhcon {
  display: flex;
  justify-content: flex-end;
}

header .mhcon div {
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
}

header .mhcon div:last-child {
  margin-left: 1rem;
}
.content {
  display: grid;
  grid-area: content;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  row-gap: 1rem;
}

.card {
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer {
  grid-area: footer;
}

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name"viewport" content="width=device-width", initial-scale="1.0"/>
    <title>PE-ZONA.RO | WEBTOONS</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <!-- SIDEBAR-NAVIGATIE -->
    <aside>
      <nav>
        <div id="sidebar">
          <ul>
            <li><a href="#">WEBTOONS</a></li>
            <li><a href="#">ECHIPĂ</a></li>
            <li><a href="#">ALĂTURĂ-TE</a></li>
            <li><a href="#">BLOG</a></li>
          </ul>
        </div>
      </nav>
    </aside>

    <!-- WEBTOONS -->
    <section>
      <!-- HEADER - ICONIȚE -->
      <header>
        <div class="mhcon">
          <div class="mhconitem"><a href="#">PATREON</a></div>
          <div class="mhconitem2"><a href="#">DISCORD</a></div>
        </div>
      </header>
      <div class="content">
        <div class="card">
          <h3>NUME WEBTOON1</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON2</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON3</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON1</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON2</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON3</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>
      </div>
    </section>

    <!-- FOOTER -->
    <footer>
      <div class="footercon">
        <p>Copyright @ pe-zona.ro</p>
      </div>
    </footer>
  </body>
</html>

【讨论】：