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

发布时间：2020-12-14 18:48:22 所属栏目：资源来源：网络整理

导读：我的想法是给出一个自适应div宽度.当我只有一个项目时,宽度应该与容器div中的项目相同. 有关如何做到这一点的任何建议？示例：http://codepen.io/tomasfrancisco/pen/PNvLLw HTML： div id="container" div class="item"/div div class="item"/div div clas

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

有关如何做到这一点的任何建议？

示例：http://codepen.io/tomasfrancisco/pen/PNvLLw

HTML：

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

CSS：

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

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!