19

I wonder how I could keep (approximately) the same amount of elements on every line, including the last one, with flex-wrap (or any other idea including flexbox).

For instance, I have a flexbox containing 6 elements. When it breaks I would like to have 3 elements on the first line, and 3 on the second (or both elements total width to be approximately the same).

(I don't want to resize the children, or to break flexbox functionalities.)

For now I just can get 5 elements on the first line, and one on the last line.

ul {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

Here is a jsfiddle : https://jsfiddle.net/yfj2g7wx/

I think most of the time it would give a better result graphically than wrapping elements one by one.

Is this possible ?

kro
  • 521
  • 6
  • 16
  • Here is an answer http://jsfiddle.net/vivmaha/oq6prk1p/9/ – Pugazh Apr 08 '16 at 08:09
  • thanks for your answer ! though it doesn't look very responsive to me... i mean flexbox should not break when it doesn't have to (i.e. when it has enough space to display every elements on one line) – kro Apr 08 '16 at 08:19

2 Answers2

8

You can use media queries to set the size of each flex item at certain breakpoints. So at the first breakpoint you would set flex-basis: 33%. This would force three items to a line.

@media screen and ( max-width: 900px ) {
  li { flex-basis: 33%; }                    /* forces three items to a line */
}

@media screen and ( max-width: 600px ) {
  li { flex-basis: 50%; }                    /* forces two items to a line */
}

@media screen and ( max-width: 300px ) {
  li { flex-basis: 100%; }                   /* forces one item per line line */
}

jsFiddle

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 6
    i marked your answer as useful, but it does not really solve the problem. i was thinking of a dynamic environnement (a responsive menu bar for a dynamic website e.g.) and the 6 children flexbox was just an exemple. but i guess it might not be possible (yet) to achieve this in a clean way with css. for now i'm just building a static website so i will use your solution. thanks for your answer. – kro Apr 08 '16 at 11:53
  • If you want to add more details to your question I'll take another look. Media queries go hand-in-hand with dynamic / responsive environments. – Michael Benjamin Apr 08 '16 at 12:00
  • 1
    the thing is, in my case, each element (child) has a different width. which is dynamic, depending on its content. i don't want to change the size of the children, i just want them to break in a certain way. here is the menu i'm working on : http://litigium.crachecode.net/ – kro Apr 08 '16 at 12:55
2

If you want an even amount of elements per row, then split them up and wrap two sets of three elements. Now you'll always get either a full 6 on one line, or 3 on 2 lines. It's also maintaining space-between on both lines which gives it that nice symmetrical look. I modified your Fiddle:

  • Wrapping the last 3 <li>s in a new <ul>.
  • Then wrapped a <section> around both <ul>s
  • Made the <section> a flex container.

  • Added flex to both <ul>s.

    section { display: flex; justify-content: space-between; flex-flow: row wrap; }

Fiddle

zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • thanks for the interesting idea. even if it could not suit every cases, it looks very good for my purpose. I don't know how to keep the same space in between 3rd and 4th elements as the rest when on one line though. i gonna think about a way to combine this solution with breakpoints... – kro Apr 09 '16 at 10:02
  • Unfortunately, the 3rd and 4th elements are the edges of the 2
      s. I think if you applied `padding-right` to the 1st
        and `padding-left` to the 2nd
          you should be able to create the extra space needed. That would be a perfect solution to combine this and media queries. In fact, you can change flex properties at certain breakpoints, like row to column when viewport is narrow and when the viewport is at it's widest, you could use `inline-flex` if you have multiple flex containers.
     – zer00ne Apr 09 '16 at 10:12
  • 1
    thanks to this answer http://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox i found a simpler way to force a break (i have to combine with breakpoints). 2 solutions : break-after would be great but it only works with firefox https://jsfiddle.net/yfj2g7wx/1/ and this solution is a bit more tricky but should work everywhere : https://jsfiddle.net/yfj2g7wx/2/ -- you can find detailed explanations on the first link – kro Apr 09 '16 at 10:55