html - 使用 Flexbox 在 DIV 元素之上创建网格

Question

这是我的代码的 JS fiddle :https://jsfiddle.net/o7nj1mj9/

HTML:

<div id="div2">
        <div class = "flex-table"> 1</div>
        <div class = "flex-table"> 2</div>
        <div class = "flex-table"> 3</div>
        <div class = "flex-table"> 4</div>

CSS:

.container {
display: flex;
position: relative;
max-width: 1600px;
padding: 15px;
height: 275px;
overflow: visible;
background-color: #84B6C0;
box-shadow: 0px 10px 5px #888888;
font-family: 'Open Sans';

#div2 {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
height: 50px;
line-height:30px;
}

.flex-table {
background: tomato;
margin: 5px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
height: auto;
flex-grow: 1;
min-width: 25%;
}

我正在尝试在 DIV 元素“Portfolio”的顶部创建一个由 4 个正方形组成的网格。如您所见，我有 4 个方 block ，但它们并没有填满 DIV 的整个空间。

如果代码困惑，我们深表歉意。

Answer 1

在 #div2 { 中，删除 height:50px 并添加 width: 100%

https://jsfiddle.net/o7nj1mj9/1/