scareware scareware -4 years ago 161
CSS Question

Using Flexbox to create a grid on top of a DIV element

here's the JS fiddle of my code: 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%;
}


I'm trying to create a gird of 4 squares on top of the DIV element, "Portfolio." As you can see, I've got 4 squares, but they aren't filling up the whole space of the DIV.

Apologies if the code is messy.

Answer Source

In #div2 {, remove height:50px and add width: 100%

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download