CSS flex 盒 : How to make the children elements occupy the entire width of their container

Question

请在这里查看我的代码:http://codepen.io/CrazySynthax/pen/NdJbmB

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

我希望 header-square 类的元素分布在容器的整个宽度上，这意味着 header-square 的总宽度将占页面的 100%。

如果不在 css 中明确定义 header-square 类的宽度，我该怎么做？

Answer 1

只需将 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。

结果应该是这样的: