CSS - 如何使用 flexbox 适应项目

Question

您可以在中看到我的代码输出。 我希望

Header

和

Content

放在彼此下面并粘在一起。这应该在“菜单”标签位于它们中间（#header、#content）时执行，但在外观上紧挨着它。

#app {
    position: relative;
    display: flex;
    width: 100%;
    background-color: #eee;
    border-radius: 10px;
    height: 100%;
    padding: 2%;
    gap: 2%;
    flex-wrap: wrap;
}

#header, #menu, #content {
    position: relative;
    width: 40%;
    min-width: 300px;
    height: 300px;
    background-color: #333;
    border-radius: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu {
    height: 100%;
}

<div id="app">
        <div id="header">HEADER</div>
        <div id="menu">MENU</div>
        <div id="content">CONTENT</div>
 </div>

Answer 1

我认为

grid

会是一个更好的选择。

#app {
  /*position: relative;*/
  /*display: flex;*/
  background-color: #eee;
  border-radius: 10px;
  /*height: 100%;
    width: 100%;*/
  padding: 1rem;
  grid-gap: 1rem;
  /*flex-wrap: wrap;*/
  
  display: grid;
  grid-template: 
  "header menu" 1fr /* [grid area] [grid area] [row height] */
  "content menu" 1fr /* [grid area] [grid area] [row height] */
  / 3fr 1fr;  /* [left column width] [right column width] */
 
}

#header,
#menu,
#content {
  /*position: relative;*/
  /*width: 40%;*/
  /*min-width: 300px;*/
  /*height: 300px;*/
  background-color: #333;
  border-radius: 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  
  flex-direction: column;
}

#header {
  grid-area: header;
  max-height: 300px;
}

#menu {
  grid-area: menu;
}

#content {
  grid-area: content;
}

<div id="app">
  <div id="header">
    <h1>HEADER</h1>
  </div>
  <div id="menu">
    <h1>MENU</h1>
  </div>
  <div id="content">
    <h1>CONTENT</h1>
  </div>
</div>