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

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-squares 的总宽度将是页面的 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。

结果应该是这样的：

Answer 2

将flex: 1 添加到类'.header-square'

Answer 3

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

试试这个 1 我认为它 100% 有效