使Flex div的大小与其内容相同

Question

我试图让Flexbox完全符合其内容的大小。在下面的图像中，它用黄色边框表示。在没有包装的样式中，黄色边框完全符合内容：

但是当我添加

flex-wrap: wrap;

然后它开始向左侧和右侧添加填充/边距（我不想要）

黄色div的样式是：

.work-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: 0px;

    border-width: 5px;
    border-style: solid;
    border-color: #FFFF00;
}

最低工作示例：https://pastebin.com/x37KgJiz

Answer 1

这里的问题是work-container不知道项目何时换行，因此不会自动调整自己的宽度。

由于没有要设置的属性，要使其自行运行，请使用脚本或媒体查询来调整work-container的宽度。

Stack snippet

＆＃13;

＆＃13;

.work-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-width: 5px;
  border-style: solid;
  border-color: #FFFF00;
}

.work-image {
  width: 300px;
  height: 200px;
}


@media (min-width: 300px) {
  .work-container {
    width: 300px;
  }
}
@media (min-width: 600px) {
  .work-container {
    width: 600px;
  }
}
@media (min-width: 900px) {
  .work-container {
    width: 900px;
  }
}

＆＃13;

<div class="work-container">
  <div>
    <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="work-image" />
  </div>
  <div>
    <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="work-image" />
  </div>
  <div>
    <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="work-image" />
  </div>
  <div>
    <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="work-image" />
  </div>
  <div>
    <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="work-image" />
  </div>
  <div>
    <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="work-image" />
  </div>
  <div>
    <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="work-image" />
  </div>
  <div>
    <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" class="work-image" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;