Html 如何使用flexbox使div的宽度适应内容

我想根据内容调整.flexrow div的宽度，但无法使用flex进行设置

HTML

我已经创建了一个片段

这是我想要的一个例子：

有什么建议吗？

试试这个代码示例

.flexrow .card {
  height: 60px;
  background-color: red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

我删除了宽度，以便flexrow能够适应内容。

---

这是你想要的吗？如果没有，请指定一张图片？

我想你想要的是，如果你想让边栏和内容并排，你需要在fullwidth div上使用flex，请检查下面的代码：

.侧边栏{ 背景：黑色； 颜色：白色； } .全宽{ 显示器：flex； } .中心{ 显示器：flex； 证明内容：中心； 对齐项目：居中； 宽度：100%； } 福莱斯罗先生{ 显示：内联flex； 弯曲方向：行； 柔性包装：包装； 宽度：100%； } .flexrow.卡{ 宽度：calc33.33%-20px； 框大小：边框框； 高度：60px； 背景色：红色； 利润率：10px； 填充：10px； 文本对齐：居中； } 边栏

边栏

边栏

边栏

边栏

边栏

卡片

卡片

卡片

卡片

卡片

卡片

更新

试试这个：

 .flexrow {
  width: 90%;
  display: inline-flex;  
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;  
  margin: 0 auto;  
}
.flexrow:after {  
    content: "";  
    width: 300px;
    margin: 10px;
    padding: 10px;
    text-align: center;    
}

---

希望您正在寻找的是：

这里的主要问题是，当项目包装时，无论是否使用Flexbox，其容器都不会将其宽度调整为新的内容宽度

对于现有标记，以下是一个简单的修复程序，分两步实现：

添加内容：中心；根据你的.flexrow规则

对于每一个可能的列，您需要少一个ghost元素来将最后一行的元素一直推到左侧。添加的元素和新的.flexrow.card:empty规则将发挥神奇的作用

.flexrow .card:empty {
  height: 0;
  margin: 0 10px;
  padding: 0 10px;
}

堆栈片段

.全宽{ 背景颜色：灰色； 显示器：flex； } .侧边栏{ flex:0280px； 利润率：10px； 填充：10px； 背景色：黑色； 颜色：白色； } 福莱斯罗先生{ 显示器：flex； 柔性包装：包装； 对齐内容：居中对齐； 证明内容：中心； } .flexrow.卡{ 宽度：300px； 高度：60px； 背景色：红色； 利润率：10px； 填充：10px； 文本对齐：居中； } .flexrow.卡：空{ 身高：0； 利润率：0.10px； 填充：0 10px； } 边栏

边栏

边栏

边栏

边栏

边栏

卡片

卡片

卡片

卡片

卡片

卡片

卡片

---

你指的是哪个部门？你想达到什么目标？每个红色块的宽度仅与其中的文本相同？抱歉，我希望对齐.flexrow divTry附加此值：justify content:space around；对于你的.flexrow，如果我理解正确，希望它能帮助你：@SaroVin当你发布代码笔时，请确保在尝试建议的解决方案时不会更新相同的代码。现在链接的代码笔与原来的代码笔不同，因此会混淆用户。@SaroVin在什么意义上它不起作用？你能更具体一点吗？flexrow div没有完全对齐我更改了答案，所以flexrow垂直居中于.center div，这是你想要的吗？或者你想让前3张cols牌在顶部，最后3张在底部？@SaroVin从图片中我无法确定你到底想要什么。你能用文字而不是图像来解释吗？@SaroVin现在检查我的答案。flexrow是100%宽度-边栏宽度，在内部垂直和水平轴上居中对齐。居中，框。卡片在一行上有3张。你可以改变，如果你想我已经设置了他们的宽度33.33%是的，但flexrow div不是完美的aligned@SaroVin您可以为flexrow设置更正确的宽度。如果您希望水平对齐项目，它应该可以正常工作。。。。和/或玩margins@SaroVin，我已经更新了我的答案，尝试使用它，希望它对您有用：@SaroVin，对于您的响应性，只需使用媒体查询，这将解决您的问题，因此响应性取决于您。我如何计算列数？@SaroVin您只需添加足够的ghost元素即可。注意，对许多人来说，他们不会做出任何改变difference@SaroVin这里的主要问题是，当项目包装时，无论是否使用Flexbox，其容器都不会将其宽度调整为新内容宽度，因此不会以您想要的方式居中显示。我展示的技巧是如何用CSS解决这个问题。另一种方法是使用脚本

 .flexrow {
  width: 90%;
  display: inline-flex;  
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;  
  margin: 0 auto;  
}
.flexrow:after {  
    content: "";  
    width: 300px;
    margin: 10px;
    padding: 10px;
    text-align: center;    
}

.flexrow .card:empty {
  height: 0;
  margin: 0 10px;
  padding: 0 10px;
}