Hey guys, I have a quick question about Flexbox.
I am able to achieve divs with 50% width’s ok, but once I add margins to the child elements the layout breaks. (I noticed if the widths were fixed then the margins don’t affect anything - but I want to be able to have fluid widths.) I thought perhaps using the justify-content: space-betweeen would do the trick, but again the widths need to be fixed…? Surely with all the bells and whistles Flexbox offers - this is a simple thing to achieve?
.flex-container {
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flex-container > div {
box-sizing: border-box;
position:relative;
background-color:rgba(67,66,68, 1);
height:250px;
text-align: center;
-webkit-flex: 0 1 50%;
flex: 0 1 50%;
-webkit-align-self: auto;
align-self: auto;
}
<div class="flex-container">
<div class="flex-item"><p>Box 1</p></div>
<div class="flex-item"><p>Box 2</p></div>
<div class="flex-item"><p>Box 3</p></div>
<div class="flex-item"><p>Box 4</p><</div>
</div>