Question

我有一个响应列，然后将其分为3个相等的子列。

我每个都有一个图标占位符，宽度为100％。有没有办法使用CSS的flex来确保我的高度总是等于我的计算宽度？

如果可能，我真的想避免使用图片和JavaScript。

Answer 1

您可以使用两种方法。一种是使用vw设置flexbox的高度。如果需要，您还可以使用calc。当然，如果页面宽度在更宽的视口上变为静态或设置了max-width，那么您可以使用媒体查询在px，em等中设置弹性箱高度。

第二种方法是在flexbox子元素上使用填充。与边距不同，100％顶部或底部填充意味着100％的父级宽度而不是高度。

＆＃13;

.flex {
    display: flex;
    background-color: red;
    margin-bottom: 1px;
}
.flex div {
    flex: 1;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIyOS4wMzE4MTMiIHZpZXdCb3g9IjAgMCAzMiAyOS4wMzE4MTMiPgo8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjAzMTI1LDAsMCwwLjAzMTI1LDAsLTAuOTY4MTg3NSkiPgo8cGF0aCBkPSJNIDEwMjQsNTkwLjQ0NCA1MTIsMTkzLjAxOCAwLDU5MC40NDYgMCw0MjguNDA4IDUxMiwzMC45ODIgMTAyNCw0MjguNDEgWiBNIDg5Niw1NzYgbCAwLDM4NCAtMjU2LDAgMCwtMjU2IC0yNTYsMCAwLDI1NiAtMjU2LDAgMCwtMzg0IDM4NCwtMjg4IHoiLz4KPC9nPgo8L3N2Zz4K) center no-repeat;
    background-size: 50%;
}
.flex.vw {
    height: 16.67vw;
}
.flex.padding div {
    padding-top: 16.67%;
}

＆＃13;

<div class="flex vw">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="flex padding">
    <div></div>
    <div></div>
    <div></div>
</div>

＆＃13;

flexbox CSS可以调整宽高比吗？

1 个答案: