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

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

html css

Html 当我使用固定位置时，Flexbox垂直堆叠项目,html,css,flexbox,Html,Css,Flexbox,有人能告诉我为什么我的物品在一个固定位置的div内使用Flexbox和direction行垂直堆叠吗？下面是一个指向JSFIDLE示例的链接 1）您使用了错误的语法： display:flexbox应为display:flex 2） flex-direction的默认值为row，flex-wrap的默认值为noWrap-（）-因此您的flex-flow规则是不必要的以下是更新的 <body> <div id="container"> <

有人能告诉我为什么我的物品在一个固定位置的div内使用Flexbox和direction行垂直堆叠吗？下面是一个指向JSFIDLE示例的链接

1）您使用了错误的语法：

display:flexbox

应为

display:flex

2）

flex-direction

的默认值为

row

，

flex-wrap

的默认值为

noWrap

-（）-因此您的

flex-flow

规则是不必要的

以下是更新的

<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>

#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;
}