1

I'm trying to build something in CSS and I'm hitting a bug.

I have a few elements in my flex that need to be double width and double height compared to the rest of the elements.

See example here of what I got right now. http://jsfiddle.net/pJy66/25/

I'd like to display it like this

(1)(2)(3)(3)
(4)(5)(3)(3)
(6)(6)(7)(8)
(6)(6)(9)(0)

But as you can see in the fiddle, it seems to clear the elements so it shows like this

(1)(2)(3)(3)
( )( )(3)(3)
(4)(5)(6)(7)
(8)(8)(9)(0)
(8)(8)( )( )

So can I do some kind of a rowspan to have the 4-5 elements on the left of element 3?

.foo {
    display:flex;
    flex-flow: row wrap;
    justify-content: center;
}

.foo div{
  background:#888;
  width:25%;
  height:50px;
}

.foo .b1{background:#000;}
.foo .b2{background:#555;}
.foo .b3{background:#111;}
.foo .b4{background:#666;}
.foo .b5{background:#222;}
.foo .b6{background:#777;}
.foo .b7{background:#333;}
.foo .b8{background:#888;}
.foo .b9{background:#444;}
.foo .b10{background:#999;}

.foo .b1, .foo .b8{
  height:100px;
  width:50%
}
<div class="foo">
  <div class="b1"></div>
  <div class="b2"></div>
  <div class="b3"></div>
  <div class="b4"></div>
  <div class="b5"></div>
  <div class="b6"></div>
  <div class="b7"></div>
  <div class="b8"></div>
  <div class="b9"></div>
  <div class="b10"></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Fredy31
  • 2,660
  • 6
  • 29
  • 54
  • 2
    Nope, flexbox does not do well for stuff like that, you need grid or a table ... or a script – Asons Mar 08 '17 at 20:12
  • for the googlers - another solution might be based on http://www.java2s.com/example/html-css/css-layout/rowspan-behavior-with-flexbox.html [still wrokking on the exact solution for this question, though] – mtness Apr 29 '22 at 15:00

2 Answers2

4

Break the main container into four groups, then use nested containers where necessary.

.foo {
  display: flex;
  flex-flow: row wrap;
  color: white;
  font-weight: bold;
}

.foo > div {
  flex: 0 0 50%;
  height: 100px;
  display: flex;
  flex-flow: row wrap;
}

.group1 > div, .group4 > div {
  flex: 0 0 50%;
  height: 50px;
}

.foo .b1  { background: #000;  }
.foo .b2  { background: #555;  }
.foo .b3  { background: green; }
.foo .b4  { background: #666;  }
.foo .b5  { background: #222;  }
.foo .b6  { background: red;   }
.foo .b7  { background: #333;  }
.foo .b8  { background: #888;  }
.foo .b9  { background: #444;  }
.foo .b10 { background: #999;  }
<div class="foo">

  <div class="group1">
    <div class="b1">1</div>
    <div class="b2">2</div>
    <div class="b4">4</div>
    <div class="b5">5</div>
  </div>

  <div class="group2 b3">3</div>

  <div class="group3 b6">6</div>

  <div class="group4">
    <div class="b7">7</div>
    <div class="b8">8</div>
    <div class="b9">9</div>
    <div class="b10">10</div>
  </div>

</div>

jsFiddle

Here's something similar I did for a calculator keypad layout:

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Sadly doesnt really fix the problem, I can't break the 3 and 6 elements in 4 parts. They should stay whole. – Fredy31 Mar 08 '17 at 20:24
  • Yes, I realized that I made a mistake. You want double height also. I'm working on the correction. – Michael Benjamin Mar 08 '17 at 20:26
  • that's what i wrote in my answer (without detailed code, but still)... ;-) – Johannes Mar 08 '17 at 20:49
  • @Johannes, I didn't see your answer. Was on jsfiddle building this thing. Anyway, if you want, complete your answer with code (you can use mine if you want), and I'll delete my answer. – Michael Benjamin Mar 08 '17 at 20:52
  • @Michael_B why? we have yours :) – Roko C. Buljan Mar 08 '17 at 20:53
  • no no, not necessary. I know you as "Master of Flexboxes" - I am just wondering that you weren't faster than I was... ;-) (+1 for your code) – Johannes Mar 08 '17 at 20:54
  • @Johannes If you look at the edit history, I misread the question originally and gave an incorrect answer. Then I got distracted with something else. Then I came back to make the correction later. If you were first with the answer, just add the code. I don't mind. Cheers! – Michael Benjamin Mar 08 '17 at 20:55
3

You'd have to nest flex containers, i.e. define some of the flex-items (children) to be flex-containers (parents) themselves.

In your example...

(1)(2)(3)(3)
(4)(5)(3)(3)
(6)(6)(7)(8)
(6)(6)(9)(0)

... 1,2,4,5 and 7,8,9,0 would be nested in flex-items A and B, so the outer structure would be

A 3
6 B

..., where inside that, A would consist of 

1 2
4 5

...and B would consist of 

7 8
9 0

The overall container, A and B would have display: flex and flex-wrap: wrap, with appropriate width and flex settings for the smaller elements.

Johannes
  • 64,305
  • 18
  • 73
  • 130