flexbox网格下的div答案

【问题标题】：Div under grid in flexboxflexbox网格下的div
【发布时间】：2021-07-22 04:58:54
【问题描述】：

我有一个布局，它是一个侧边栏和一个网格，它们都包裹在一个 flexbox 中。我想在网格下面放一个 div，这样它就可以有 prev/next 按钮，就像在this image 中一样，但我不知道该怎么做。网格会根据窗口自行调整大小，以便网格可以根据需要占用尽可能多的行，然后 div 应该低于该行，并且与网格一样宽。

这是我拥有的，但 div 在网格的右侧：

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

<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    aside {
        background-color: red;
        flex: 1;
        min-width: 250px;
    }

    .grid-container {
        flex: 4;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .grid-item {
        border: 1px solid black;
        padding: 20px;
        font-size: 24px;
        text-align: center;
        overflow: hidden;
    }

    #flex-container {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
    }
</style>
</head>

<body>
<div id="flex-container">
    <aside class="sidebar">
    </aside>

    <section class="grid-container">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
            <div class="grid-item">10</div>
            <div class="grid-item">11</div>
            <div class="grid-item">12</div>
            <div class="grid-item">13</div>
            <div class="grid-item">14</div>
            <div class="grid-item">15</div>
            <div class="grid-item">16</div>
            <div class="grid-item">17</div>
            <div class="grid-item">18</div>

    </section>

    <div id="page-buttons">
        <a href="test.html?page=1">prev</a>
        <a href="test.html?page=5">next</a>
    </div>

</div>

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

您应该使用嵌套的弹性容器。部分和底部 div 应该被包裹在另一个弹性容器内，弹性方向指向列。所以外部 flex 将使侧边栏和内部 flex 容器并排。或者只是使用普通的 div 容器而不是 flex。

【讨论】：

【解决方案2】：

查看以下代码。

#main{
display :flex;
}
#sidebar{
width:70px;
height: 300px;

border: solid black 1px;
}
#grid-area{
width:200px;
height: 300px;
border: solid black 1px;
display: block;
}
#grid{
width:200px;
height: 250px;
border: solid black 1px;
display: block;
}

<div id="main">
<div id="sidebar"></div>
<div id="grid-area">
<div id="grid"></div>
<div id="button">next / prev</div>
</div>
</div>

【讨论】：

【解决方案3】：

这是另一个示例，仅网格将 pre/next 按钮保留在视口底部：

body {
  margin: 0;
}

#grid-container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(250px, 1fr) 4fr;
  grid-template-rows: 1fr auto;
}

aside {
  background-color: red;
  border: 1px solid;
  margin: 0.25em;
  grid-row: span 2;
  grid-column: 1;
}

section,
#page-buttons {
  grid-column: 2;
  border: solid 1px;
  margin: 0.25em;
}

section {
  overflow: auto;
}

#page-buttons {
  display: flex;
  gap: 1em;
  padding: 0.5em;
  background: lightgray;
  justify-content: center;
}

.grid-item {
  border: 1px solid black;
  padding: 20px;
  font-size: 24px;
  text-align: center;
  overflow: hidden;
}

<div id="grid-container">
  <aside class="sidebar">
  </aside>

  <section class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
    <div class="grid-item">16</div>
    <div class="grid-item">17</div>
    <div class="grid-item">18</div>
  </section>

  <div id="page-buttons">
    <a href="test.html?page=1">prev</a>
    <a href="test.html?page=5">next</a>
  </div>

</div>

【讨论】：