在保持向左的同时使用空间[重复]答案

【问题标题】：Using space between while keeping to the left [duplicate]在保持向左的同时使用空间[重复]
【发布时间】：2022-01-18 16:55:13
【问题描述】：

这应该很简单，如果我错过了一个简单的解决方案，我们深表歉意。我想使用space-between，以便四个 DIV 在桌面上排成一排，并位于最左侧和最右侧的 DIV 边缘，像这样触摸包装器的边缘。

我目前正在使用space-between，但它会导致任何不完整的行出现问题。理想情况下，不完整的行会居中或向左，所以我尝试了space-evenly，如果没有其他解决方案但 DIV 没有到达其容器的边缘，这会很好。

所以我尝试使用 start，得到的结果我也很满意，因为它们都在左侧，并且每次添加新的 DIV 时都会添加到左侧。这样就有左边留太多空白空间的问题。

我希望能够使用space-between 将它们保持在边缘，同时也能够使用start 使它们保持在左侧对齐，而右侧没有空格或space-evenly 与start 哪个不太可能，因为space-evenly 的工作方式意味着space-between，但能够设置到左侧是最好的选择，并且应该在布局上与第一张和第三张图像相似，而右侧没有所有空间。

代码如下，任何帮助表示赞赏。提前致谢。

.wrap {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}

.section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.container {
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  background-color: aqua;
  border-radius: 0;
}

@media only screen and (max-width: 500px) {
  .container {
    width: 100%
  }
}

.container-inner {
  display: inline-block;
  width: 100%;
  padding: 10px;
  text-align: left;
  overflow: hidden;
}

.container-image-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-title-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-image {
  display: block;
  width: 100%;
}

<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
  </div>
</div>

我尝试使用::after，它确实固定在左侧，但没有将最后一行与上面的行对齐。

.section::after {
  content: "";
  flex: auto;
}

我尝试了一个 hacky 替代方法，添加了一个 alignment-container div，它确实获得了所需的结果，但每次网格内容更改时都需要更新，并且感觉这不是实现这一目标的最佳方法，尤其是在调整窗口大小时和移动被考虑，因为会有空的空间。

.wrap {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}

.section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.container {
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  background-color: aqua;
  border-radius: 0;
}

@media only screen and (max-width: 500px) {
  .container {
    width: 100%
  }
}

.container-inner {
  display: inline-block;
  width: 100%;
  padding: 10px;
  text-align: left;
  overflow: hidden;
}

.container-image-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-title-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-image {
  display: block;
  width: 100%;
}

.alignment-container {
  display: none;
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  border-radius: 0;
}

<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="alignment-container"></div>
    <div class="alignment-container"></div>
  </div>
</div>

EDIT: The question linked as the same as this doesn't actually answer the question

【问题讨论】：

如果您需要按行和列控制布局，您应该使用display: grid。 Flexbox 是针对一维的。 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/…
我同意乍一看这似乎是grid 的一个很好的用例，但我确实觉得即使使用grid，您的要求也可能无法“开箱即用”地得到支持，并且可能需要一些额外的定制/技巧......
@morganney 我已经用网格回答了我自己的问题。希望可以用 flex 做点什么，但感谢您的指点。
知道了@AlexanderNied，谢谢。

标签： html css flexbox

【解决方案1】：

切换到使用网格而不进行许多其他更改。删除边距以避免使用 box-sizing 并使用媒体查询将内部宽度设置为恒定 100% 以更改列宽。

.wrap {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
}

.section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(auto-fill, 22%);
    justify-content: space-between;
}

@media only screen and (max-width: 500px) {
.section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, 100%);
    justify-content: space-between;
}
}

.container {
    width: 100%;
    min-height: 150px;
    display: flex;
    margin: 0;
    background-color: aqua;
    border-radius: 0;
}

.container-inner {
    display: inline-block;
    width: 100%;
    padding: 10px;
    text-align: left;
    overflow: hidden;
}

.container-image-wrap {
    display: block;
    width: 100%;
    margin: auto;
    padding-bottom: 10px;
}

.container-image {
    display: block;
    width: 100%;
}

.container-title-wrap {
    display: block;
    width: 100%;
    margin: auto;
    padding-bottom: 10px;
}

<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>

  </div>
</div>

【讨论】：