使用百分比值填充 flexbox 项

Posted 2023-03-05

【中文标题】使用百分比值填充 flexbox 项

【英文标题】：Using percentage values to fill flexbox items

【发布时间】：2012-01-27 20:53:44

【问题描述】：

我在 Google Chrome 中使用 flexboxes（只需要支持这个浏览器）来创建动态布局。我在一个 div 元素中有 n 个子元素，它们应该以相同的比例共享整个空间。由于新引入的弹性盒，这可以正常工作。但我还必须将每个内部 div 的高度设置为 0。如果我想将此 div 内的元素拉伸到 100% 高度，它使用给定值 0 而不是任何计算值。因为我选择了 flex-boxes 以防止使用 javascript，所以我更愿意保持这种方式。有没有其他方法可以让图片的高度填满 div？

这是代码（仅在谷歌浏览器中测试过）：

html

<div class="flexbox">
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
</div>

css

            .flexbox 
                display:-webkit-box;
                -webkit-box-orient:vertical;
                height:300px;
                width:200px;
            
            .flexbox > div 
                -webkit-box-flex:1;
                height:0;
                border:solid 1px #000000;
            
            .flexbox > div > img 
                height:100%;
            

The code to watch in the browser

【问题讨论】：

为什么必须将高度设置为 0？如果您不打算明确设置高度，那么您期望 100% 是 100% 的值是多少？

我这样做是为了将整个可用空间划分为相同大小的部分。否则只分配剩余空间（不包括内容）。这是使用该邮件中描述的 flex-function 的行为：http://lists.w3.org/Archives/Public/www-style/2011Nov/0770.html

【参考方案1】：

嗯，经过数小时的研究，我让它工作了。 要做以下改动：

.flexbox 
            display:-webkit-box;
            -webkit-box-orient:vertical;
            height:300px;
            width:200px;
        
        .flexbox > div 
            -webkit-box-flex:1;
            height:0;
            border:solid 1px #000000;
            position:relative; /* CHANGE */
        
        .flexbox > div > img 
            height:100%;
            position:absolute; /* CHANGE */
        

如果您对此感兴趣，可以通过 ChromeDevTools 对 css 进行这些更改，您会看到正确的结果！

【讨论】：

.. 不要忘记为链接设置width: 100%; :)