css 未应用Flex模型中的相同列高

ojsjcaue 于 2023-06-25 发布在其他

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

我需要创建一个1x4的布局，当宽度小于600px时更改为2x2布局：

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  flex: 25%;
}

@media only screen and (max-width: 600px) {
  .block {
    flex: 50%;
  }
}

.main, .block {
  flex-grow: 1;
}

.text {
  flex-grow: 1;
  border: 1px solid red;
  padding: 10px;
}

<div class="group">

  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
  </div>

  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum.</div>
    </div>
  </div>

  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
  </div>       

  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet.</div>
    </div>
  </div>   

</div>

我需要列是相同的高度，但他们不是。
我需要border类应用text div和所有要相同的高度。
如何做到这一点？

css

来源：https://stackoverflow.com/questions/76502677/same-columns-height-in-flex-model-is-not-being-applied

1条答案

按热度按时间

myzjeezk1#

你可以用网格

.group {
  display: grid;
  grid-template: 1fr / repeat(4, 1fr);
  row-gap: 20px;  /* Adjust for padding in .text */
}

.block,
.main {
  height: 100%;
}

@media only screen and (max-width: 600px) {
  .group {
    grid-template: 1fr 1fr / 1fr 1fr;
  }
}

.text {
  border: 1px solid red;
  height: 100%;
  padding: 10px;
}

<div class="group">

  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
  </div>

  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum.</div>
    </div>
  </div>

  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
  </div>

  <div class="block">
    <div class="main">
      <div class="text">Lorem ipsum dolor sit amet.</div>
    </div>
  </div>

</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 未应用Flex模型中的相同列高

1条答案

相关问题

热门标签

最新问答