如何使用 Flexbox 将块固定到容器的左侧？答案

【问题标题】：How to pin blocks to the left side of the container using Flexbox?如何使用 Flexbox 将块固定到容器的左侧？
【发布时间】：2020-11-21 13:09:26
【问题描述】：

谁能解释一下当屏幕变小时如何将块移动到左侧？

    .limited-offer-box
        display: flex
        flex-direction: row
        justify-content: space-around
        flex-wrap: wrap

在我的情况下，我需要将书“偷书贼”（以及屏幕变小时的其他书）移到左侧而不是中心像这样：

【问题讨论】：

你好，你能提供一个可运行的版本吗？
只需删除 justify-content: space-around 并给孩子们留出余地。完成。

标签： html css sass flexbox

【解决方案1】：

我认为在您的用例中使用grid 而不是flexbox 会更好。

尝试在你的 CSS 中使用它：

.limited-offer-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
    grid-gap: 5px;
}

如果没有，您可以尝试使用align-items: start;。

【讨论】：

【解决方案2】：

以正确的方式使用flex，考虑到帖子，我可以创建如下内容：

fiddle 玩游戏。

.MainDiv {
  display: flex;
  margin: 10px;
  flex-wrap: wrap;
}

.ChildDiv {
  margin: 10px;
}

.ChildDiv img {
  height: 200px;
  width: 100px;
}

<div class="MainDiv">
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
</div>

使MainDiv居中：

.MainDiv {
  display: flex;
  margin: 10px;
  flex-wrap: wrap;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ChildDiv {
  margin: 10px;
}

.ChildDiv img {
  height: 200px;
  width: 100px;
}

<div class="MainDiv">
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
  <div class="ChildDiv">
    <img src="http://placekitten.com/301/301">
  </div>
</div>

【讨论】：

在这种情况下你不需要display: inline-block 来“以正确的方式使用 flex”;)
哎呀，我在添加代码，我没有检查代码！我的错，我会把它拿出来:)谢谢你让我知道。
@Manjuboyz 还有一个问题，如何将整个容器设置为中心？因为在这种情况下它不在中心
有很多方法可以解决这个问题，我可以尝试其中一种。
这里是为您创建的示例 sn-p，这可能会对您有所帮助。 jsfiddle.net/Manju06/qcx7ptL0/16

【解决方案3】：

您可以将justify-content:space-around 更改为justify-content:flex-start 并为您的元素添加边距。

【讨论】：