flex 项目在换行之前缩小到最小宽度答案

【问题标题】：flex item shrink to min-width before wrapping to new lineflex 项目在换行之前缩小到最小宽度
【发布时间】：2021-03-10 17:52:33
【问题描述】：

我在让弹性项目在弹性容器内收缩直到达到最小宽度然后换行时遇到问题。我让它在basic codepen 中工作，但我无法让它在某些生产角度代码中工作。

//angular component    
<div class="container"> 
        <div class='item" [ngStyle]={minWidth: calc((100vw - 20px) / 3}, maxWidth: 'calc((100vw - 20px) / 2}'>
         
        </div>
    </div>

//css
    .container { 
        height: calc(100vh - 50px - 40px - 10px);
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
    }

    .item {
        min-width: calc((100vw - 20px) / 3);
        max-width: calc((100vw - 20px) / 2);
        max-height: 100%;
        min-height: 50%;
        display: inline-block;
        vertical-align: top;
        background-color: #262626;
        border-right: 1px solid #353535;
        text-align: center;
        color: white;
        -webkit-box-flex: 1;
        flex: auto;
    }

做了一些研究，我发现当你使用 flex-wrap: wrap 时，换行优先于项目收缩。这就是我在角度组件中看到的行为。两个弹性项目占据了它们容器的 50%，但是当添加第三个而不是收缩它时，它会换行。如果没有 flex-wrap 设置，添加第三个项目会导致所有项目缩小到最小宽度。

然而，在 codepen 中，3 个项目会缩小以适应，只有在添加第 4 个项目后，项目才会开始包装。

【问题讨论】：

你能把.container的宽度从width: 100%;改成width: 100vw;吗？

标签： html css angular flexbox

【解决方案1】：

body 的默认边距弄乱了您的布局。只需将 body margin 设置为 0 即可。

或者，您可以将.container 的宽度设置为100vw 而不是100%。

我认为角度指令或其他任何东西都不会导致您的布局中断。

您可以通过以上编辑检查我的笔here

【讨论】：