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

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

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

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

HTML：

<div ID="container">  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div><div ID="container">  <div ></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 ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div><div ID="container">  <div ></div></div>

总结

以上是内存溢出为你收集整理的html – 如何使flex div的宽度适应内容全部内容，希望文章能够帮你解决html – 如何使flex div的宽度适应内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。