How to save spacing pattern on multiple lines using a container with flexible containers

Question

This is where I start: http://jsfiddle.net/Vercingetorix333/7b2L25a5/2/

As you can see. The interval that I have at both ends of the container (flexibility size: 10) is much larger than the spaces between the contents (flex size: 2.5). At the moment when the user reduces the size of the html window, the elements are eventually transferred to the second line (as expected).

However, I would like to make the first window resizing the breakpoint / responsiveness so that when the content goes to the second line (maybe using @media.... in css?), It takes up two divs at a time.

Then I want each line in the container to look like this:

large buffer - content - small buffer - content - large buffer

Can I do this exclusively in css? Or do I need javascript?

Edit: adding my code from Fiddle (for posterity).

HTML

 <div class="outer_container"> <div class="outer_buffer"></div> <div class="content">Some Content</div> <div class="inner_buffer"></div> <div class="content">Some Content</div> <div class="inner_buffer"></div> <div class="content">Some Content</div> <div class="inner_buffer"></div> <div class="content">Some Content</div> <div class="outer_buffer"></div> </div> 

CSS

 .outer_container{ display: flex; flex-wrap: wrap; justify-content: center; } .outer_buffer{ flex-grow: 10; } .inner_buffer{ flex-grow: 2.5; } .content{ width: 50px; border: solid 1px red; } 

Answer 1

EDIT: here was my approximate solution based on incorrect assumptions about limiting the number of objects and their behavior. An example jsfiddle of this solution was http://jsfiddle.net/7b2L25a5/32/ , and for the JS version, http://jsfiddle.net/7b2L25a5/38/

UNITED SOLUTION

The desired behavior can be achieved by adding one additional shell (instead of several "buffers") and changing the flex-basis and flex-grow values ​​of the inner wrapper depending on the number of elements that correspond to one line, so the gaps between the elements are stretched with a constant proportion to the outer "buffers" (for which pseudo-elements of an external container are used):

 body { margin: 10px 0; } .outer_container { display: flex; flex-wrap: nowrap; justify-content: stretch; } .outer_container::before, .outer_container::after { content: ''; flex: 4 0 0; } .middle_container { display: flex; /* if there are 2 items on each line, we need to stretch 1 space */ flex: 1 0 104px; flex-wrap: wrap; justify-content: space-between; } .content{ width: 50px; border: solid 1px red; } @media screen and (min-width: 260px) { /* if there are 4 items on each line, we need to stretch 3 spaces */ .middle_container { flex: 3 0 208px; } } 

 <div class="outer_container"> <div class="middle_container"> <div class="content">Some Content</div> <div class="content">Some Content</div> <div class="content">Some Content</div> <div class="content">Some Content</div> </div> </div> 

The number of media queries required depends on the number of layout options. For two options (2 or 4 items per row), only one MQ is required.

Answer 2

You could do it like this answer. I use two sets of large (flex-grow 10) and small (flex-grow 2.5) buffer div for the first and second resizing window points, and I systematically assigned display: none one set at a time to display only one set of large and small a div buffer for each @media breakpoint. I use two div containers, and each div container has two div contents, and in the first window, resizing @media interrupting the request moves the right container to the second line. In fact, it takes the two most suitable div content at a time according to your desired result.

Please review the edited response section (below) to execute it with minimal HTML markup using CSS pseudo elements (i.e :after and :before ).

Result:

At the first point of the @media query request, the result is as follows:

large buffer (10) - content - small buffer (2.5) - content - large buffer (10) - large buffer (10) - content - small buffer (2.5) - - large buffer (10)

All you have to do is compute the max-width of the CSS @media queries to determine the query points by .content size for this solution.

Example: If you set the width from .content to 200px , then:

First request breakpoint @media max-width: 4 x 200px = 800px

Second request breakpoint @media max-width: 2 x 200px = 400px

Example: JSFiddle - DEMO

JSFiddle - DEMO

 .wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .container { display: flex; flex-wrap: wrap; justify-content: space-between; flex-grow: 2.5; } .content { width: 50px; border: solid 1px red; } .lg { flex-grow: 10; } .sm { flex-grow: 2.5; } .w-buffer { display: block; } .c-buffer { display: none; } @media (max-width: 224px) { .wrapper { display: block; } .container { justify-content: center; flex-grow: 0; } .w-buffer { display: none; } .c-buffer { display: block; } } @media (max-width: 120px) { .wrapper { display: flex; } .w-buffer, .c-buffer { display: none; } } 

 <div class="wrapper"> <div class="w-buffer lg"></div> <div class="container"> <div class="c-buffer lg"></div> <div class="content">Some Content</div> <div class="c-buffer sm"></div> <div class="content">Some Content</div> <div class="c-buffer lg"></div> </div> <div class="w-buffer sm"></div> <div class="container"> <div class="c-buffer lg"></div> <div class="content">Some Content</div> <div class="c-buffer sm"></div> <div class="content">Some Content</div> <div class="c-buffer lg"></div> </div> <div class="w-buffer lg"></div> </div> 

You can also use CSS Pseudo-elements (i.e :after and :before ) to reduce the amount of div buffer c.

JSFiddle - DEMO

 body { margin: 8px; } .wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .container { display: flex; flex-wrap: wrap; justify-content: space-between; flex-grow: 2.5; } .content { width: 50px; border: solid 1px red; } .pseudo-buffer:before, .pseudo-buffer:after { content:" "; display: block; } .wrapper.pseudo-buffer:before, .wrapper.pseudo-buffer:after { flex-grow: 10; } .buffer { flex-grow: 2.5; } @media (max-width: 224px) { .wrapper { display: block; } .container { justify-content: center; flex-grow: 0; } .wrapper.pseudo-buffer:before, .wrapper.pseudo-buffer:after { display: none; } .container.pseudo-buffer:before, .container.pseudo-buffer:after { flex-grow: 10; } } @media (max-width: 120px) { .wrapper { display: flex; } .wrapper.pseudo-buffer:before, .wrapper.pseudo-buffer:after, .container.pseudo-buffer:before, .container.pseudo-buffer:after, .buffer { display: none; } } 

 <div class="wrapper pseudo-buffer"> <div class="container pseudo-buffer"> <div class="content">Some Content</div> <div class="buffer"></div> <div class="content">Some Content</div> </div> <div class="buffer"></div> <div class="container pseudo-buffer"> <div class="content">Some Content</div> <div class="buffer"></div> <div class="content">Some Content</div> </div> </div> 

[EDITED]

You can also do this without using any div buffer , just setting the width to container according to the @media breakpoint, and I use two @media breakpoints because I think if there is only one content div per line, then content divs should be horizontally centered inside the div container , and if you don't want to use the second @media breakpoint, then just delete it and set min-width: 104px; in container for @media (max-width: 208px) . You can do it like this: JSFiddle DEMO

JSFiddle - DEMO

 body { margin: 20px 0px 0px 0px; } .wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .content { width: 50px; border: solid 1px red; } .container { display: flex; flex-wrap: wrap; justify-content: space-between; flex-grow: 7.5; /* Total space between 4 content divs same as 3 x 2.5 flex-grow */ } .wrapper:before, .wrapper:after { content: " "; flex-grow: 10; } @media (max-width: 208px) { .container { width: 104px; /* 2 (content divs per line) x 52px (content div width) */ flex-grow: 2.5; } } @media (max-width: 104px) { .container { width: 52px; flex-grow: 0; /* Set value 0 to center content divs inside the container */ } } 

 <div class="wrapper"> <div class="container"> <div class="content">Some Content</div> <div class="content">Some Content</div> <div class="content">Some Content</div> <div class="content">Some Content</div> </div> </div> 

Answer 3

I do not quite understand why buffer divs are needed. All you have to do is stylize the CSS of the top component correctly than you can remove the buffers.

 .outer_container { display: flex; flex-wrap: wrap; justify-content:center; } 

See violin

Answer 4

You can do this exclusively in CSS. First, as you said .. yes you need the @media type using an external CSS file.

In your CSS file, it might look like this:

 @media all { .class #id } 

the @media all header is for all screens other than those you specify. It looks like a basic set. For specific, see the following format:

 @media screen @media screen and (min-width: 1278px) and (max-width: 1282px) { #id .class } 

Adding identifiers and classes between the two brackets above will contain special rules that will overwrite the rules written in the @media header and take effect only on the screen, whose width is from 1278 to 1282 pixels, so you can see we focus on the screen 1280px x XXX high {12-inch typical low-cost netbook}

The focus on your question is a meta-structure. Suppose we have 4 photos with a size of 400 pixels. The total width is 400 + 400 + 400 + 400 = 1600 pixels. Thus, on a screen with a width of 800 pixels in line 1, only two images will be shown, and the remaining 2 in the second line.

If you applied flex-box without proper html markup, you can move on to the transition where only the right-most element will move to the second line.

From what I understand from your question, you want the transition to be 2 points moving to the second line, as best friends. Something like that:

becomes

The correct markup would be something like this:

 <div id="Container"> <div id="Inner"> <div id="Box">Content1</div> <div id="Box">Content2</div> </div> <div id="Inner"> <div id="Box">Content3</div> <div id="Box">Content4</div> </div> </div> 

and the correct CSS:

 #Container { position: relative; width: auto; min-width: 800px; display: flex; flex-flow: row wrap; } #Inner { position: relative; display: inline-block; } #Box { position: relative; display: block; } 

The Flex container is something new with HTML5, so I personally experienced some glitches. You may need to change the position of the #Box to “static” rather than “relative”, and none of them can work (in this case, it should return to static by default, but I saw instances where this is not the case .

I am very sure that what I wrote above is what you need. Greetings.