css 使一个弹性项目在换行后比其他项目占用更大的高度

m528fe3b 于 2023-02-10 发布在其他

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

我有一个英雄部分分为两部分。一个主要是装饰性的，另一个有更多的文本和元素。我想有它分为两列时，屏幕足够宽， Package 时，屏幕变得太小。到目前为止，我已经完成了这一点。然而，一旦项目 Package 他们都使用50%的父的高度。我希望其中之一缩小到它的大小。s元素，而另一个元素增长以使用父级高度的剩余部分。下面是一个工作示例：

.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;
}

<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%赋给所需的项，但这会在项换行时导致溢出。

css

来源：https://stackoverflow.com/questions/75364752/make-one-flex-item-take-more-height-than-the-others-after-they-wrap

1条答案

按热度按时间

vhmi4jdf1#

你可以试试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;
}

<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>

赞(0）回复(0）举报 2023-02-10

我来回答

css 使一个弹性项目在换行后比其他项目占用更大的高度

1条答案

相关问题

热门标签

最新问答