Question

有人可以告诉我为什么我的物品使用Flexbox垂直堆叠并且方向行位于具有固定位置的div内部吗？这是一个jsfiddle示例

的链接

<body>
    <div id="container">
        <div id="topNav">
            <div class="navBar">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
        <div id="mainContent">this is the main content div</div>
        <div id="bottomNav">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

CSS

#container
{
    z-index:1;
    position:absolute;
    width:100%;
    height:100%;
    min-width:0;
    display:flexbox;
    flex-flow:column nowrap;
    background-color:red;
    bottom:0;
}

#topNav
{
    z-index:2;
    position:fixed;
    top:0;
    width:100%;
    height:40px;
}

.navBar
{
    display:flexbox;
    height:40px;
    flex-direction:row;
    background-color:rgba(0, 38, 255,0.5);
    justify-content:center;
}

#mainContent{
    position:absolute;
    height:100%;
    width:100%;
    background-color:pink;
}

#bottomNav
{
    z-index:2;
    position:fixed;
    bottom:0;
    display:flexbox;
    flex-flow:row nowrap;
    background-color:rgba(0, 38, 255,0.5);
    height:40px;
    width:100%;
}

.item
{
    height:36px;
    width:36px;
    position:relative;
    background-color:brown;
    border:thin solid #000;
    flex-flow: row nowrap;
}

Answer 1

1）您使用的语法错误：

display: flexbox应为display:flex

2）flex-direction的默认值为row，flex-wrap的默认值为noWrap - （MDN） - 所以您的{{1}规则是不必要的

以下是更新的 FIDDLE

当我使用固定位置时，Flexbox会垂直堆叠项目

CSS

1 个答案: