英文:
CSS - How to fit the item using the flexbox
问题
您可以在此图片中看到我的代码输出。我希望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>
英文:
You can see my codes output in this image.
I want the Header and Content to be placed under each other and stick together. This should be executed while the 'Menu' tag is in the middle them (#header, #content), but next to it in appearance.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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%;
}
<!-- language: lang-html -->
<div id="app">
<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="content">CONTENT</div>
</div>
<!-- end snippet -->
答案1
得分: 1
我认为对于这个情况，grid 会是一个更好的选择。
英文:
I think grid would be a better choice for this.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论