英文:
Make one flex-item take more height than the others after they wrap
问题
我有一个分成两部分的英雄区域。一部分主要是装饰性的，另一部分包含更多的文本和元素。当屏幕足够宽时，我希望将其分成两列，当屏幕变得太小时，它们应该换行。到目前为止，我已经做到了这一点。然而，一旦项目换行，它们都使用父容器高度的50%。我希望其中一个项目缩小到其元素的大小，而另一个项目则增长以使用父容器高度的剩余部分。
这是一个工作示例：
<section class="hero">
<div class="item item1">Item1. Should be short when wrapped</div>
<div class="item item2">Item2. Should take all available height when wrapped.</div>
</section>
在不添加媒体查询的情况下，我离解决方案最接近的方法是将align-content: flex-start属性添加到 flex 容器，然后将height: 100%赋予所需的项目。然而，这会导致项目在换行后溢出。
英文:
I have a hero section divided in two parts. One is mainly decorative and the other has more text and elements. I want to have it divided in two columns when the screen is wide enough and wrap when the screen gets too small. So far I have accomplished this. However once the items wrap they both use 50% of the parent's height. I want one of them to shrink to the size of it's elements while the other grows to use the reminder of the parent height.
Here is a working example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.hero {
display: flex;
flex-wrap: wrap;
height: 500px;
}
.hero .item {
flex-basis: 40%;
min-width: 300px;
}
/*PURELY DECORATIVE*/
.hero {
background-color: hsla(0, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted red;
}
.item1 {
background-color: hsla(120, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted green;
}
.item2 {
background-color: hsla(240, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted blue;
}
<!-- language: lang-html -->
<section class="hero">
<div class="item item1">Item1. Should be short when wrapped</div>
<div class="item item2">Item2. Should take all available height when wrapped.</div>
</section>
<!-- end snippet -->
The closest I've got to a solution, whithout adding a media query, is adding the align-content: flex-start property to the flex container and then give height: 100% to the desired item. However this causes overflow once the items wrap.
答案1
得分: 1
你可以尝试使用CSS网格布局。
.hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 40%));
grid-template-rows: auto; /* 第一行自适应 */
grid-auto-rows: 1fr; /* 当有第二行时，它将占据剩余的空间 */
height: 500px;
}
/* 纯粹的装饰性样式 */
.hero {
background-color: hsla(0, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted red;
}
.item1 {
background-color: hsla(120, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted green;
}
.item2 {
background-color: hsla(240, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted blue;
}
<section class="hero">
<div class="item item1">Item1. Should be short when wrapped</div>
<div class="item item2">Item2. Should take all available height when wrapped.</div>
</section>
英文:
You can try with CSS grid
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 40%));
grid-template-rows: auto; /* first row auto */
grid-auto-rows: 1fr; /* when there is a second row it will take the remaining space */
height: 500px;
}
/*PURELY DECORATIVE*/
.hero {
background-color: hsla(0, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted red;
}
.item1 {
background-color: hsla(120, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted green;
}
.item2 {
background-color: hsla(240, 100%, 50%, 0.5);
padding: 10px;
border: 2px dotted blue;
}
<!-- language: lang-html -->
<section class="hero">
<div class="item item1">Item1. Should be short when wrapped</div>
<div class="item item2">Item2. Should take all available height when wrapped.</div>
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论