Responsive flexbox - changing fields from horizontal to vertical after packaging?

Question

I have a simple layout concept that can be reduced to the following image:

This can be easily achieved using flexbox . As you can see, div # 1 and div # 3 touch the borders of their container. In addition, the margin between div # 1 and div # 2 is equal to the difference between div # 2 and div # 3. This can be done with:

 .inner-div{ margin-left:10px; } .inner-div:first-child{ margin-left:0px; } 

Now let's say that the width of the viewport is decreasing. I want those divs to turn around to form a nice column. And I would like them to look like this:

But if those divs keep their configuration horizontal, they look something like this:

That, as you might guess, is undesirable.

How to change the margins for these inner divs when their container is so narrow that they are “wrapped”? Is there a way to write a conditional rule that will only apply to wrapped divs? Or am I missing a point, and the solution is very obvious, and I just missed this part of the flex-box features? I would like to see a solution that would not involve predicting what width of the container / screen will take into account the layout change from row to column, because I think this is the most convenient option.

Answer 1

You can absolutely use negative fields to achieve this.

Take a look at this script: http://jsfiddle.net/287vW/

If you don’t even bother to remove the marker from the first element, but leave it and globally reduce the container stock, you will get a consistent result.

Suppose you have the following structure:

 <div class="margin"> <div class="container"> <div class="box one"></div> <div class="box two"></div> <div class="box three"></div> </div> </div> 

Then you can apply these styles:

 .margin { border:3px solid #000000; } .container { display:flex; flex-wrap:wrap; margin:-10px 0 0 -10px; } .box { height:100px; background-color:#555555; margin:10px 0 0 10px; flex-grow:1; min-width:300px; } 

Despite the fact that we keep all the fields on the elements, the negative edge of the container removes them.

Refer to the JS Fiddle described above for the result.

I'm sure this can be achieved with one div less, but I think you can figure it out now.

Hope this helps :)

PS: If you want to know more about negative borders, see this article about smashing mag: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Answer 2

Yes, view multimedia queries .

In addition, I did a bit of jsfiddle , where you can see it in action at a very simple level. Just move the vertical panel to the right and you will see that the media query does its magic.

 @media (max-width: 200px){ .inner-div { margin: 0 0 10px 0; float: none; } #one{ margin: 0 0 10px 0; } #three { margin: 0px; } } 

If you remove the media request in jsfiddle, it will look like you described.