CSS -如何使用flexbox适应项目

3lxsmp7m 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(202)

你可以在this image中看到我的代码输出。我想把Header和Content放在彼此下面，粘在一起。这应该在'Menu'标签位于它们中间（#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>

css

来源：https://stackoverflow.com/questions/76189837/css-how-to-fit-the-item-using-the-flexbox

1条答案

按热度按时间

ars1skjm1#

我认为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>

赞(0）回复(0）举报 2023-05-08

我来回答

CSS -如何使用flexbox适应项目

1条答案

相关问题

热门标签

最新问答