Question

这是我的代码的JS小提琴：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元素“投资组合”之上创建一个4格的网格。正如你所看到的，我有4个方格，但它们并没有填满DIV的整个空间。

如果代码混乱，请道歉。

Answer 1

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

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

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

1 个答案: