css – 如何让flexbox align-items flex-end在WebKit / Blink中工作?

前端之家收集整理的这篇文章主要介绍了css – 如何让flexbox align-items flex-end在WebKit / Blink中工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将flexBox嵌套在另一个flexBox中.外盒是垂直的:
+------+
|      |
+------+
|      |
|      |
|      |
+------+

顶部区域适合内容flex 0 1 auto且下半部分填充剩余空间flex 1 1 auto.

在下半部分我有另一个柔性盒水平.我希望2个内盒之间的空间位于对齐和弯曲端之间,因此基本上2个内部固定在左下角和右下角,如下所示:

+------+
|      |
+-+  +-|
|L|  |R|
+------+

设置它似乎在Firefox中有效但在Chrome(Blink)和Safari中我得到了这个:

+------+
|      |
|      |
|      |
+-+--+-|
|L|  |R|
+-+  +-+

这是HTML

<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="bottomcontents">
            <div id="botleft">
                bottom left
            </div>
            <div id="botright">
                bottom right
            </div>
        </div>
    </div>
</div>

还有CSS

* {
    Box-sizing: border-Box;
    -moz-Box-sizing: border-Box;   
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#outer {
    height: 100%;
    border: 1px solid red;
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-content: center;
    -webkit-align-items: center;
    min-height: auto;    
}
#top {
    width: 100%;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    border: 1px solid blue;
}
#bottom {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    border: 1px solid green;
}
#bottomcontents {
    height: 100%;
    width: 100%;
    border: 1px solid pink;
    display: flex;
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    justify-content: space-between;
    align-content: center;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    -webkit-align-content: center;
    -webkit-align-items: flex-end;
    min-height: auto;        
}

#botleft,#botright {
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}
#botleft {
    border: 1px solid purple;
}
#botright {
    border: 1px solid cyan;
}

here’s a fiddle

它在Firefox中按预期工作.我做错什么了吗?这是Chrome和Safari中的错误吗?有解决方法吗?

解决方法

基本上,你所看到的是“身高:100%;”在#bottomcontents上强制容器在其周围容器的“外部”. 100%的高度最终得到它的父母的高度,父母也有100%的高度;意味着为#bottomcontents指定的高度被设置为与#outer相同的高度.您可以更清楚地看到,如果添加“overflow:hidden”,它将超出应有的范围.到#bottom.您可以在此处找到有关您的问题的更深入的讨论:您将遇到此问题: Height 100% on flexbox column child

除非我错过了您需要的一些要求,否则您也可以删除#bottomcontents容器并使用#bottom进行到期.示例代码(底部的jsfiddle示例):

HTML:

<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="bottomcontents">
            <div id="botleft">
                bottom left
            </div>
            <div id="botright">
                bottom right
            </div>
        </div>
    </div>
</div>

CSS:

* {
    Box-sizing: border-Box;
    -moz-Box-sizing: border-Box;   
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#outer {
    border: 5px solid red;
    display: flex;
    display: -webkit-flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
}

#top {
    width: 100%;
    border: 5px solid blue;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

#bottom {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    height: 100%;
    border: 5px solid green;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

#left {
    border: 5px solid purple;
    padding: .5em;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

#right {
    border: 5px solid cyan;
    padding: .5em;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

我的小提琴:http://jsfiddle.net/blake770/2br5x/

猜你在找的CSS相关文章