用内容扩展 div 宽度[重复]答案

【问题标题】：Expend div width with contents [duplicate]用内容扩展 div 宽度[重复]
【发布时间】：2018-11-19 20:59:25
【问题描述】：

我希望我的项目 .item 与 #item-wrapper 内的左侧对齐，并且在 .items div 内居中。这有点工作，但是当我调整窗口大小时，#item-wrapper 的宽度不再正确

.items {
    text-align: center;
    box-sizing: border-box;
    width: 80vw;
    margin: auto;
    padding: 10px;
    display: flex;
    background: red;
}

#items-wrapper {
    margin: auto;
    text-align: left;
    font-size: 0;
    background: green;
}

.item {
    box-sizing: border-box;
    width: 250px;
    height: 250px;
    display: inline-block;       
    background: blue;
    border: 1px solid black;
}

<div class="items">
    <div id="items-wrapper">
        <div id="item01" class="item"></div>
        <div id="item02" class="item"></div>
        <div id="item03" class="item"></div>
    </div>
</div>

【问题讨论】：

“正确的宽度”是什么意思？
@Paulie_D 我认为 OP 的含义与线路上的项目数一样宽 - 当它换行时，包装器变为 100% 宽度
那么这个 - stackoverflow.com/questions/34995740/…
您可以添加图像或其他可以显示您想要的结果的东西吗？您是否希望蓝色方块始终位于同一宽度的单行中？请更清楚
觉得更像这样：stackoverflow.com/questions/28876653/css-centering-dynamic-div/…

标签： html css

【解决方案1】：

.items {
        text-align: center;
        box-sizing: border-box;
        width:80%;
        margin: auto;
        padding: 10px;
        display: flex;
        background: red;
      }

#items-wrapper
  {
    margin: auto;
    text-align: left;
    font-size: 0;
    background: green;
   } 
 .item {
      box-sizing: border-box;
      width:32%px;
      height:32%px;
      display: inline-block;
      background: blue;
      border: 1px solid black;
   }

如果你想让你的 div 项目停止到某个大小，你可以给出最小宽度：例如 100px;

【讨论】：