如何使flex div的宽度适应内容？

Question

我的想法是给一个自适应的div宽度。当只有一个项目时，宽度应该与容器div内的项目相同。

您对如何做到这一点有什么建议吗？

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

- Tomás Francisco

Answer 1

你可以使用 display: inline-flex

#container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

- Nenad Vracar

---

我对inline-flex存在疑虑，因为浏览器支持和解释的差异，但这个解决方案确实解决了我的问题！谢谢。 - Tomás Francisco

“浏览器解释”是什么意思？ - Nenad Vracar

根据我的经验，inline-flex在不同的浏览器中会产生不同的结果。 - Tomás Francisco

我觉得他的意思是“实现”。 - TylerH

如果有人在寻找一个可以根据项目数量适应宽度的包装弹性盒子，那么这并不起作用。也就是说，如果我只有一个项目，这个解决方案可以工作（弹性盒子将具有其宽度），但如果我有10个宽度为80像素的项目，并且弹性盒子最多只能有200像素，那它不会变成可以容纳5行的160像素宽度。它会有5行，但右侧的弹性盒子内会留下很多空白空间。 :( 后来发现，似乎我希望的东西无法实现：https://dev59.com/8VoU5IYBdhLWcg3we2-6 - Jan Żankowski

措辞不太合理，但是'inline-flex'表明它是'inline'。 - Oliver Dixon

Answer 2

我相信这两个是你所需要的。

display: inline-flex;
width: min-content;

- benjarlett

---

"max-content"也可以。 - undefined

Answer 3

如果我正确理解了你的问题：

这就是你要寻找的，可以通过GRID实现：

 grid-template-columns: repeat(auto-fit, minmax(100px, auto));

.zz {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
  padding: 10px 40px;
  background: pink;
  gap: 10px;
  margin-right: auto;
}

span.x{
  align-self: flex-start;
  padding: 5px 40px;
  background: white;
}

<div class="container">
  <div class="zz" href="#">
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
  </div>
</div>

- DarkCoder