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

【问题标题】：Make a Flex div the same size as it's content使 Flex div 的大小与其内容相同
【发布时间】：2017-11-12 04:51:55
【问题描述】：

我正在尝试使 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

【问题讨论】：

为此，您需要媒体查询或脚本，那么您更喜欢哪一个？
媒体查询如果可能的话，除非 JS 更简单
显示：弹性；是一个在块级别上运行的容器，但是，inline-flex 不会像您期望的那样完全包裹内容，如果您的孩子（img）具有已知宽度，那么@mdia 可以帮助您设置断点，如果容器区域大约是全屏宽度，如果它嵌套在小于窗口宽度的列中，那么 javascript 将是所需的工具。

标签： html css flexbox

【解决方案1】：

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

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

堆栈sn-p

.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;
  }
}

<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>

【讨论】：