使用flex时,是否可以增加div的高度?

时间:2019-12-17 21:48:28

标签: css flexbox grid-layout

我的网格布局为8格。我正在尝试增加第5格的高度,并减少第8格的高度。我尝试过的每一种方法都会产生很大的差距。我以前没有使用过砌体同位素,因此需要为移动设备重新划分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>

0 个答案:

没有答案