Question

我有一个菜单 div，它填充100％的容器高度，而在它旁边，右边是标题，正文和页脚部分。

我设法使用CSS flex property执行此操作。但是，我想更改"menu" div从容器中取出的宽度数量，如同10% width of container's width，并生成rest divs fill what's left（即使"menu" div在以后隐藏了。）

JS我现在所掌握的小提琴：https://jsfiddle.net/jf29vr0x/3/

这是HTML

<div class="container">

    <div class="menu">
        Menu
    </div>

    <div class="header">
        Header
    </div>

    <div class="body">
        Body
    </div>

    <div class="footer">
        Footer
    </div>

</div>

这是CSS：

.container 
{
    display: flex;
    flex-flow: column wrap;
    width: 75%;
    height: 500px;
    position: relative;
    margin: 0 auto;
}
.menu
{
    flex: 0 0 100%;
    background: lightblue;
}
.header
{
    flex: 0 0 10%;
    background: lightgray;
}
.body
{
    flex: 0 0 80%;
    background: purple;
}
.footer
{
    flex: 0 0 10%;
    background: lightgreen;
}

我发现如果我在“menu”类上明确设置宽度，它会调整它的大小，但其余的框不会填充左边的空格，除非我还明确指出它们的宽度为100％。但是，这样做会使容器溢出，并且因为容器与中心对齐，所以容器会看起来很松散。

我还可以将宽度设置为90％（在页眉，页脚主体上）和菜单上的10％，但菜单有时设置为display: none;，因此当它消失时，其他布局部分仅为将达到容器宽度的90％。

有没有办法只使用flex-box属性？我不太了解flex-shrink和flex-grow的含义，但我认为它们只影响（在这种情况下）高度？

谢谢。

Answer 1

您必须在右列附近添加包装器，然后仅在flex-basis元素上指定.menu。

CSS：

.container {
    display: flex;
    width: 75%;
    height: 500px;
    position: relative;
    margin: 0 auto;
    height: 500px;
    overflow: hidden;
}
.right-col {
    flex-flow: column wrap;
    flex-grow: 1;
    height: 100%;
    display: flex;
}
.menu {
    flex-basis: 10%;
    background: lightblue;
}
.header {
    flex: 0 0 10%;
    background: lightgray;
}
.body {
    flex: 0 0 80%;
    background: purple;
}
.footer {
    flex: 0 0 10%;
    background: lightgreen;
}

HTML：

<div class="container">
    <div class="menu">Menu</div>
    <div class="right-col">
        <div class="header">Header</div>
        <div class="body">Body</div>
        <div class="footer">Footer</div>
    </div>
</div>

小提琴：https://jsfiddle.net/jf29vr0x/11/

现在，当隐藏菜单时，右列会扩展全部数量。

如何更改CSS弹性框列的宽度？

1 个答案: