html - Display flex 覆盖显示网格布局

Question

当我在其中包含显示 flex 布局时，我的显示网格布局出现问题。

在我的第一个例子中，我有我想要的网格布局。它分为 5 列，页眉占 100%，页脚占 100%，在它们之间我有一个过滤器元素占 20%，一个元素元素占 60%，aside 元素占另外 20%。这很好用。

但是，在我的秒示例中，我在元素网格中添加了一个 flex 元素。当我这样做时，过滤器和 aside 元素不再保留预期的 20%，并且 items 元素变得更大。似乎 display flex 正在覆盖显示网格。我假设发生这种情况是因为显示网格和显示 flex 元素都脱离了正常的文档流。

所以我的问题是，如何在不丢失网格的预期布局(filter-20% items-60% aside-20%)的情况下将 display flex 元素与网格的元素元素一起使用？

.header {
  grid-area: header;
  background-color: coral;
}

.filter {
  grid-area: filter;
  background-color: aquamarine;
}

.items {
  grid-area: items;
  background-color: lightskyblue;
}

.aside {
  grid-area: aside;
  background-color: palegreen;
}

.footer {
  grid-area: footer;
  background-color: palevioletred;
}

.gridContainer {
  display: grid;
  grid-template-areas: "header header header header header" "filter items items items aside" "footer footer footer footer footer";
}

.gridContainer>div {
  padding: 20px;
}

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flexItem {
  background-color: beige;
  margin: 0px 0px 20px 0px;
}

Example 1:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">Items</div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>
<br /><br /><br /> Example 2:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">
    <div class="flexContainer">
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>

    </div>
  </div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>

Answer 1

您需要定义这些百分比，否则默认情况下内容将定义宽度。只需将每一列设置为 1fr 即可获得所需的结果:

.header {
  grid-area: header;
  background-color: coral;
}

.filter {
  grid-area: filter;
  background-color: aquamarine;
}

.items {
  grid-area: items;
  background-color: lightskyblue;
}

.aside {
  grid-area: aside;
  background-color: palegreen;
}

.footer {
  grid-area: footer;
  background-color: palevioletred;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-areas: 
    "header header header header header" 
    "filter items items items aside" 
    "footer footer footer footer footer";
}

.gridContainer>div {
  padding: 20px;
}

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flexItem {
  background-color: beige;
  margin: 0px 0px 20px 0px;
}

Example 1:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">Items</div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>
<br /><br /><br /> Example 2:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">
    <div class="flexContainer">
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>

    </div>
  </div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>