时间戳

首页 > 解决方案 > Flexbox - 具有固定边距的图像列：如何获得均匀的图像宽度

css - Flexbox - 具有固定边距的图像列：如何获得均匀的图像宽度

问题描述

我有一个设计，其列中有图像，它们之间有固定的边距（或间隙）。现在列有边距，因为每列的总边距不同（因为第一列没有左边距，最后一列没有右边距），每列图像的宽度变得不同，导致高度在中间图像上有所不同。 在此处输入图像描述

我试图划分边距，以便每列使用相同的边距总量（这似乎本能地过于复杂）。我可以让它工作，但它不适用于 3 列。我认为你不能让三列使用相同数量的边距。

我知道 CSS 网格中有一些“间隙”属性，但是如何在 flexbox 中解决它？

在此处查看我的示例代码： 示例

<template>
  <div id="app">
    <div class="row">
      <div class="col-3">
        <div>
          <img
            src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
          />
        </div>
      </div>
      <div class="col-3">
        <div>
          <img
            src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
          />
        </div>
      </div>
      <div class="col-3">
        <div>
          <img
            src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
          />
        </div>
      </div>
      <div class="col-3">
        <div>
          <img
            src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style lang="scss">
#app {
  margin: 0 auto;
  width: 800px;
  border: 3px solid orange;
}

.row {
  display: flex;
  box-sizing: border-box;
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-direction: row;
  flex-wrap: wrap; 
  img {
    width: 100%;
    object-fit: cover;
  }
}
.col-3 {
  flex: 0 1 25%;
  max-width: 25%;
  /* width:25%; */
  > div {
    /* margin-right:25px; */
  }
  &:first-child > div {
    margin-right: 12.5px;
  }
  &:nth-child(2) > div {
    margin-right: 12.5px;
    margin-left: 12.5px;
  }
  &:nth-child(3) > div {
    margin-right: 12.5px;
    margin-left: 12.5px;
  }
  &:last-child > div {
    margin-left: 12.5px;
  }
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

标签： cssflexbox

解决方案

更新：我现在意识到您正在寻找使用 flex 而不是 css 网格的解决方案。另一个答案在那里提供了一些选项。如果您确实想使用网格，尽管这种方法很方便，因为您的宽度将根据您选择的任何间隙自动计算。

使用display:grid, 并将您的容器设置为具有四列，每列一个小数单位，以及column-gap您想要的间隙。

图像下方的间隙是因为默认情况下图像是内联元素，因此它们位于文本的基线。如果您将图像设置display:block为间隙将消失。

.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 12px;
  column-gap: 12px;
  border:3px solid yellow;
}

.col-3 {
  width: 100%;
}

.col-3 img {
  display: block;
  width: 100%;
  object-fit: cover;
}
<div class="row">
  <div class="col-3">
    <img src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80" />
  </div>
  <div class="col-3">
    <img src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80" />
  </div>
  <div class="col-3">
    <img src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80" />
  </div>
  <div class="col-3">
    <img src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80" />
  </div>
</div>

推荐阅读