如何使flex div的宽度适应内容 [英] How to adapt a flex div's width to content

问题描述

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

My idea is to give an adaptive div width. When I have just one item, the width should be the same as the item within the container div.

关于如何执行此操作的任何建议?

Any suggestion on how to do this?

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

推荐答案

您可以使用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>

这篇关于如何使flex div的宽度适应内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！