css – 如何使嵌套的flexbox工作

前端之家收集整理的这篇文章主要介绍了css – 如何使嵌套的flexbox工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个嵌套的FlexBox设置的例子: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/
<div class="Box fullSize">
    <div class="BoxHeader">HEADER</div>
    <div class="BoxContent">
        <div class="Box fullSize">
            <div class="BoxHeader moregreen">INNER HEADER</div>
            <div class="BoxContent red">CONTENT CONTENT CONTENT</div>
            <div class="BoxFooter moreblue">INNER FOOTER</div>
        </div>
    </div>
    <div class="BoxFooter">FOOTER</div>
</div>

在此示例中适用以下内容

> CSS’Box’类使用只有BoxContent被增加的flexBox属性.对于特定的CSS属性和值,请检查小提琴.
”fullSize’只将width和height设置为100%.

当您使用Firefox和Chrome检查此小提琴时,您会得到不同的结果.在Firefox中,我会假定它必须做,这是拉伸内部的.BoxContent.然而在Chrome中,内部的.BoxContent没有被拉伸.

有人会有一个想法,如何使内容拉伸在Chrome?也许是一个缺少的特定webkit属性

解决方法

除非你需要额外的div,否则删除它.元素的高度和沿主轴的长度(列方向)之间有时会有所不同,这在这里引起了一些混乱.基本上看起来,它比浏览器相信它高,这就是为什么高度:100%不像你所期望的那样工作(我不知道在这种情况下哪个行为是正确的).

无论什么原因,将元素提升到一个flex容器中.

http://jsfiddle.net/MUrPj/14/

<div class="Box fullSize">
    <div class="BoxHeader">HEADER</div>
    <div class="BoxContent Box">
        <div class="BoxHeader moregreen">INNER HEADER</div>
        <div class="BoxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div class="BoxFooter moreblue">INNER FOOTER</div>
    </div>
    <div class="BoxFooter">FOOTER</div>
</div>
原文链接:https://www.f2er.com/css/216497.html

猜你在找的CSS相关文章