Html flex flow:column wrap不'；t拉伸父元素'；s宽度_Html_Css_Flexbox

Html flex flow:column wrap不'；t拉伸父元素'；s宽度

html css

Html flex flow:column wrap不'；t拉伸父元素'；s宽度,html,css,flexbox,Html,Css,Flexbox,使用flex-flow:column-wrap时，父元素的宽度不会拉伸 *{ margin: 0; padding: 0; } .box{ background: #f03; position: relative; display: inline-block; /* top:10px; */ /*

使用

flex-flow:column-wrap

时，父元素的宽度不会拉伸

*{
            margin: 0;
            padding: 0;
        }
        .box{
            background: #f03;
            position: relative;
            display: inline-block;
            /* top:10px; */
            /* left: 10px; */
            padding: 20px;
        }
        .in{
            display: flex;
            align-items: center;
            flex-flow: column wrap;
            max-height: 300px; 
            align-content: flex-start;
            justify-content: space-between;

        }
        .item{
            background: #fe3;
            width: 100px;
            margin-bottom: 20px;
            height: 100px;

        }
        .item:last-child{
            margin-left: 15px;
        }
    <body>
     <div class="box">
         <div class="in">
             <div class="item">1</div>
             <div class="item">2</div>
             <div class="item">3</div>
         </div>
     </div>
</body>

*{
保证金：0；
填充：0；
}
.盒子{
背景#f03；
位置：相对位置；
显示：内联块；
/*顶部：10px*/
/*左：10px*/
填充：20px；
}
.在{
显示器：flex；
对齐项目：居中；
柔性流：柱包裹；
最大高度：300px；
调整内容：灵活启动；
证明内容：之间的空间；
}
.项目{
背景：#fe3；
宽度：100px；
边缘底部：20px；
高度：100px；
}
.项目：最后一个孩子{
左边距：15px；
}
1.
2.
3.

那么我应该怎么做呢？

从此类中删除显示属性
Remove the display properties from this class 
.box{
            background: #f03;
            display: inline-block;
           display:relative;
            /* top:10px; */
            /* left: 10px; */
            padding: 20px;
      }

and everything works !!!

*{
            margin: 0;
            padding: 0;
        }
        .box{
            background: #f03;
            padding: 20px;
        }
        .in{
            display: flex;
            align-items: center;
            flex-flow: column wrap;
            max-height: 300px; 
            align-content: flex-start;
            justify-content: space-between;

        }
        .item{
            background: #fe3;
            width: 100px;
            margin-bottom: 20px;
            height: 100px;

        }
        .item:last-child{
            margin-left: 15px;
        }
    <body>
     <div class="box">
         <div class="in">
             <div class="item">1</div>
             <div class="item">2</div>
             <div class="item">3</div>
         </div>
     </div>
</body>

.盒子{
背景#f03；
显示：内联块；
显示：相对；
/*顶部：10px*/
/*左：10px*/
填充：20px；
}
一切正常！！！
*{
保证金：0；
填充：0；
}
.盒子{
背景#f03；
填充：20px；
}
.在{
显示器：flex；
对齐项目：居中；
柔性流：柱包裹；
最大高度：300px；
调整内容：灵活启动；
证明内容：之间的空间；
}
.项目{
背景：#fe3；
宽度：100px；
边缘底部：20px；
高度：100px；
}
.项目：最后一个孩子{
左边距：15px；
}
1.
2.
3.

您可以在此处检查结果

如果您试图在order-one中包含一个flex容器，第一个容器需要display-flex来获取下面元素的内容

我也会做一些小的改变，但这真的取决于你想要实现什么

如果这不是你想要的，请评论，这样我可以尝试改进它。希望这能奏效：）

*{
保证金：0；
填充：0；
}
.盒子{
背景#f03；
位置：相对位置；
显示器：flex；
最大宽度：220px；
填充：20px；
}
.在{
显示器：flex；
柔性包装：包装；
最大宽度：220px；
}
.项目{
背景：#fe3；
宽度：100px；
边缘底部：20px；
高度：100px；
}
.项目-2{
顺序：3；
}
.项目-3{
左边距：20px；
}


1.
2.
3.

谢谢，~~当我设置样式“flex direction:column and min height”时，为什么不拉伸父元素的宽度呢？这是一种方式，我想我喜欢更多的行。如果答案符合你的需要，希望你能投票接受这不是问题的解决方案。我希望父对象的宽度自动拉伸，所以我不希望它是满的。

.box{
                background: #f03;
                position: relative;
                display: flex;
                max-width: 220px;
                padding: 20px;
            }
            .in{
                  display: flex;
                  flex-wrap: wrap;
                  max-width: 220px;
            }