如何更改CSS弹性框列的宽度？ [英] How to change the width of a CSS flex-box column?

问题描述

我有一个 菜单 div，可以填充100％的容器高度，右边是 标题 ， 和 页脚 部分。

我设法使用 CSS flex属性来做到这一点。但是，我想要改变容器宽度的宽度，menu div从容器中取出，使容器的宽度小于code> 10％宽度，并使 rest divs填充剩下的内容<即使菜单 div在以后隐藏）。

JS小提琴现在我有： https://jsfiddle.net/jf29vr0x/3/

这里是HTML

 < div class =container> 
 
< div class =menu> 
 Menu 
< / div> 
 
< div class =header> 
标题
< / div> 
 
< div class =body> 
 Body 
< / div> 
 
< div class =footer> 
页脚
< / div> 
 
< / div> 
  

以下是CSS：

  .container 
 {
 display：flex; 
 flex-flow：列换行; 
宽度：75％; 
 height：500px; 
 position：relative; 
 margin：0 auto; 
} 
 .menu 
 {
 flex：0 0 100％; 
 background：lightblue; 
} 
 .header 
 {
 flex：0 0 10％; 
背景：lightgray; 
} 
 .body 
 {
 flex：0 0 80％; 
背景：紫色; 
} 
 .footer 
 {
 flex：0 0 10％; 
背景：lightgreen; 
 
 
 
 
 
 $ b我发现如果我在菜单类中明确地设置宽度，它调整大小，但其余的框不填充剩下的空间，除非我也明确说明他们的宽度为100％。但是，这样做会使容器溢出，并且由于容器与中心对齐，所以容器看起来不合适。  
 
 
我也可以将宽度设置为90％（在页眉，页脚正文）和菜单上的10％，但菜单有时会设置为 display：none; ，所以当它消失的时候，其他布局部分只会是容器宽度的90％。
 
 
 
任何使用flex-box属性的方法？我不太了解flex-shrink和flex-grow是关于什么的，但是我认为它们只影响（在这种情况下）高度？
 
 
谢谢。 
解决方案
您必须在右列添加一个包装，然后只指定 flex-basis 在 .menu 元素上。
 
 
 CSS：
  .container {
 display：flex; 
宽度：75％; 
 height：500px; 
 position：relative; 
 margin：0 auto; 
 height：500px; 
 overflow：hidden; 
} 
 .right-col {
 flex-flow：列换行; 
 flex-grow：1; 
身高：100％; 
 display：flex; 
} 
 .menu {
 flex-basis：10％; 
 background：lightblue; 
} 
 .header {
 flex：0 0 10％; 
背景：lightgray; 
} 
 .body {
 flex：0 0 80％; 
背景：紫色; 
} 
 .footer {
 flex：0 0 10％; 
背景：lightgreen; 
 
  
 HTML： 
 
 
 < div class =container> 
< div class =menu> Menu< / div> 
< div class =right-col> 
< div class =header>标题< / div> 
< div class =body>正文< / div> 
< div class =footer>页脚< / div> 
< / div> 
< / div> 
  
小提琴： https://jsfiddle.net/jf29vr0x/11/  
 
 
 
现在，当菜单被隐藏时，右边一列将展开全部金额。
 
I have a menu div that fills 100% of its container height, and beside it, to the right, are the header, body and footer sections. 

I managed to do this with the CSS flex property. However, I want to change the amount of width the "menu" div takes out of the container, as in, making it 10% width of container's width, and make the rest divs fill what's left (even if the "menu" div is hidden at a later time).

JS Fiddle of what I have right now: https://jsfiddle.net/jf29vr0x/3/

Here's the 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>
Here's the 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;
}
I found that if I set the width explicitly on the "menu" class, it resizes it, but the rest of the boxes don't fill the space left, unless I also explicitly state their width to 100%. However, doing this, makes the container overflow, and because the container is aligned to the center, it looks off. 

I could also set the width to 90% (on header, footer body) and 10% on the menu, but the menu is sometimes set to display: none;, so when it disappears, the other layout parts are only going to be 90% of container's width.

Is there any way of doing this with only flex-box properties? I don't understand very well what flex-shrink and flex-grow are about, but I think they only affect (in this case) the height?

Thank you.
解决方案
You have to add a wrapper around the right column, and then only specify flex-basis on the .menu element.

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>
Fiddle: https://jsfiddle.net/jf29vr0x/11/

Now when the menu is hidden, the right column expands the full amount.

                        
这篇关于如何更改CSS弹性框列的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！