英文:
how to make a wrapped flex box fill the height
问题
Sure, here's the translated code:
#con {
height: 400px;
width: 300px;
border: solid 1px red;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
#one {
border: solid 1px green;
flex-grow: 1;
}
#two {
border: solid 1px magenta;
width: 40px;
}
#tre {
width: 100%;
height: 50px;
border: solid 1px blue;
}
<div id="con">
<div id="one">1</div>
<div id="two">2</div>
<div id="tre">3</div>
</div>
The provided code sets the CSS properties for a container and three inner div elements. The comments and HTML structure are retained as they are.
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#con {
height: 400px;
width: 300px;
border: solid 1px red;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
#one {
border: solid 1px green;
flex-grow: 1;
}
#two {
border: solid 1px magenta;
width: 40px;
}
#tre {
width: 100%;
height: 50px;
border: solid 1px blue;
}
<!-- language: lang-html -->
<div id="con">
<div id="one">1</div>
<div id="two">2</div>
<div id="tre">3</div>
</div>
<!-- end snippet -->
if i dont set the height then they autofill, but i dont want both rows to be 50% high
答案1
得分: 0
请使用类来进行样式设置，而不要使用id。如果您不受限于仅使用flexbox，我建议使用grid（如果您必须只有3个div）。
#con {
height: 400px;
width: 300px;
border: solid 1px red;
/* display: flex;
flex-wrap: wrap;
align-content: stretch; */
display: grid; /* 添加 */
grid-template-columns: auto 40px; /* 添加 */
grid-template-rows: auto 50px; /* 添加 */
}
#one {
border: solid 1px green;
/* flex-grow: 1; */
}
#two {
border: solid 1px magenta;
/* width: 40px; */
}
#tre {
/* width: 100%;
height: 50px; */
border: solid 1px blue;
grid-column: 1 / 3; /* 添加 */
}
<div id="con">
<div id="one">1</div>
<div id="two">2</div>
<div id="tre">3</div>
</div>
英文:
Please use classes for styling not id's. If you are not limited by using only flexbox, i would use grid (if you must to have only 3 divs)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#con {
height: 400px;
width: 300px;
border: solid 1px red;
/* display: flex;
flex-wrap: wrap;
align-content: stretch; */
display: grid; /* added */
grid-template-columns: auto 40px; /* added */
grid-template-rows: auto 50px; /* added */
}
#one {
border: solid 1px green;
/* flex-grow: 1; */
}
#two {
border: solid 1px magenta;
/* width: 40px; */
}
#tre {
/* width: 100%;
height: 50px; */
border: solid 1px blue;
grid-column: 1 / 3; /* added */
}
<!-- language: lang-html -->
<div id="con">
<div id="one">1</div>
<div id="two">2</div>
<div id="tre">3</div>
</div>
<!-- end snippet -->
答案2
得分: -2
只需更改这部分：
#two {
border: solid 1px magenta;
width: 40px;
}
为：
#two {
border: solid 1px magenta;
width: 50px;
}
谢谢
英文:
Juste change this :
#two {
border: solid 1px magenta;
width: 40px;
}
by :
#two {
border: solid 1px magenta;
width: 50px;
}
Thanks
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论