Flexbox 推断尺寸不一致

Question

我正在尝试创建一个自动调整大小的弹性盒，其中包装的项目按列组织，但宽度与盒子不匹配...

这是 html 正文：

<body>
    <div id="flex">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

还有我的 css 文件：

* {
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
}

#flex {
    position: absolute;
    display: flex;
    flex-flow: column wrap;
    gap: 10px;
    background: green;
    height: 500px;
}

.item {
    height: 80px;
    width: 80px;
    border-radius: 20px;
    background: red;
}

如您所见，#flex 宽度为 80px，一个项目的宽度...

现在，如果我将一些属性更改为：

#flex {
    flex-flow: row wrap;
    height: auto;
    width: 500px;
}

#flex高度正在正常增长！我怎样才能通过列中组织的项目来实现这种宽度行为？

Answer 1

只需将

width: 50%

给

#flex

并从

width

中删除

.item

，问题就会解决！还有改变

flex-flow: column wrap;

Flexbox 推断尺寸不一致

问题描述投票：0回答：1

1个回答

最新问题

Flexbox 推断尺寸不一致

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1