时间戳

首页 > 解决方案 > 使用flex时有没有办法增加div的高度？

css - 使用flex时有没有办法增加div的高度？

问题描述

我有 8 个 div 的网格布局。我正在尝试增加第 5 个 div 的高度并降低第 8 个 div 的高度。我尝试过的每一种方式都有很大的差距。我以前没有使用过砌体同位素，需要为移动设备重新排序 div，所以我想使用 flexbox。当需要在网格布局中使用不同的高度时，我真的很感激一些帮助和一些好的教程。flexbox 是最好的方法吗

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  align-items: baseline;
  align-content: start;
  width: 1058px;
}

.item {
  flex: 1 1 auto;
  margin: 3px;
  border: 1px solid red;
}
<body>
  <div class="container">
    <div class="item">
      <img src="https://via.placeholder.com/635x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
  </div>
</body>

?

标签： cssflexboxgrid-layout

解决方案

推荐阅读