Static Padding Between CSS Flex Items

Question

I am trying to create a flexible layout in CSS that will wrap according to the client's resolution.

For example, on an ipad in landscape (1024px wide), i would like to display the following:

But on a playbook in portrait (600px wide), i would like to display the following:

I have almost everything working except the 20px margins. I cannot seem to figure out how to specify the margins for wrapped elements.

Here is my code:

HTML:

<div class="box-row-fluid">
     <div class="col">Box 1</div>
     <div class="col">Box 2</div>
</div>

CSS:

.box-row-fluid {
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
}

.box-row-fluid > .col {
    -webkit-flex: 1 400px;
    background: #fff;
}

Code assumes that the browser is a valid webkit browser.

I would appreciate some help. Thank you for your time.

Answer 1

You can certainly do it like this My Fiddle (Edited background color for margin visibility)

CSS

.col:nth-child(1) {
   margin-bottom: 20px;
}

For adding a margin between 2 div horizontally you can use @media query for particular resolutions and add margin-right: 20px; for the other one

Explanation: Use :nth-child(1) because you are using class="col" for both <div>