CSS Flexbox的：如何使要素占据其容器的整个宽度的孩子

请在我的代码看这里：http://codepen.io/CrazySynthax/pen/NdJbmB CSS Flexbox的：如何使要素占据其容器的整个宽度的孩子

<table> 
    <div id="table-header"> 
    <div class=header-square>SUN</div> 
    <div class=header-square>MON</div> 
    <div class=header-square>TUE</div> 
    <div class=header-square>WED</div> 
    <div class=header-square>THU</div> 
    <div class=header-square>FRI</div> 
    <div class=header-square>SAT</div> 
    </div> 

</table> 

html, body { 
    width: 100% 
} 

#table-header { 
    flex-direction: row; 
    display: flex; 
    width: 100%; 
    flex-wrap: wrap; 
} 

.header-square { 
    background-color: aqua; 
    border: solid; 
    height:100px; 
    display:flex; 
}

我想那类的头方的元素将在整个传播容器的宽度，这意味着标题正方形的总宽度将是页面的100％。

我该如何做到这一点，而无需在css中明确定义标题 - 广场类的宽度？

来源

2017-02-15 CrazySynthax

只需将flex: 1应用于.header-square元素即可占据整个宽度。

.header-square { 
    background-color: aqua; 
    border: solid; 
    height: 100px; 
    display: flex; 
    flex: 1; 
}

编辑

要占据整个高度，添加以下内容：

html, body { 
    width: 100%; 
    height: 100%; 
} 

#table-header { 
    height: 100%; 
}

而且从.header-square除去固定height: 100px。

结果应该是这样的：

来源

2017-02-15 08:31:27 nashcheez

谢谢。如果我想在高度上做同样的事情？ – CrazySynthax

@CrazySynthax Check *编辑* – nashcheez

你能解释一下“flex：1”是什么吗？ – CrazySynthax

添加flex: 1类 '.header方'

来源

2017-02-15 08:32:00

不要重复已经提供给问题的答案。 – nashcheez

我在同一时间给出了这个答案。我不知道有人要给出同样的答案。对不起，我没有第六感。 –

.header方{
background-color: aqua;
height:100px;
width: calc(100%/7);
}

试试这个1我认为这是工作100％

来源

2017-02-15 08:51:32

Orayt！ Pano kung动态数据？呵呵 –

CSS Flexbox的：如何使要素占据其容器的整个宽度的孩子

回答

相关问题