html - Keeping all elements aligned to the same grid and spanning multiple columns -

i'm trying out css3's flexbox first time , seems promising, i'm having trouble getting behave.

basically, want flexbox behave table order property can tell in css order display elements in grid. possible flexbox?

here's test page created: https://jsfiddle.net/lb838dwf/

html:

<div id="main">   <div id="div1">div 1</div>   <div id="div2">div 2</div>   <div>generic</div>   <div id="div3">div 3</div>   <div>generic</div>   <div id="div4">div 4</div>   <div>generic</div>   <div>generic</div>   <div>generic</div>   <div>generic</div>   <div>generic</div> </div> 

css:

#main {     width: 100%;     border: 1px solid #c3c3c3;     display: -webkit-flex;     display: flex;     -webkit-flex-wrap: wrap;     flex-wrap: wrap; }  #main div {     min-width: 25%;     height: 100px;     -webkit-flex: 1;     flex: 1;     -webkit-order: 2;     order: 1;     background-color: #ccc; }  #main #div1 {     -webkit-order: 3;     order: 3;     background-color: coral; } #main #div2 {     -webkit-order: 5;     order: 5;     background-color: lightblue; } #main #div3 {     -webkit-flex: 2;     flex: 2;     -webkit-order: 2;     order: 2;     background-color: lightgreen; } #main #div4 {     -webkit-order: 4;     order: 4;     background-color: pink; } 

you can see #div3 has flex: 2, means should span 2 columns, it's taking 1 column. also, 3 divs @ bottom (div1, div4, div2) aren't aligning same grid items above it. if add max-width: 25% #main div style, keeps same grid, spanning columns doesn't work. tried setting max-width: 25% divs , max-width: none #div3 (the 1 flex:2) doesn't have affect.

let's dissect few of things wrote clarify flexbox behavior.

---

you can see #div3 has flex: 2, means should span 2 columns, it's taking 1 column.

flex: 2 not mean should span 2 columns. isn't html colspan attribute. (and if was, have 3 other flex items ["table cells"] occupying 3 remaining columns, how #div3 expand 2 columns? have break out of grid.)

the flex property shorthand flex-grow, flex-shrink , flex-basis properties.

the flex-grow property controls how flex items expand distributing remaining space in flex container. applying flex: 2 you're saying want flex item take twice remaining space siblings, not double size.

from spec, flex-grow property:

...determines how flex item grow relative rest of flex items in flex container when positive free space distributed.

however, since you've given container (#main) width: 100%, , each flex item min-width: 25%, there no remaining space distribute. nothing happens.

to illustrate behavior, change width of each flex item 50px. leaves space distribute , #div3 takes 2x much. see demo: https://jsfiddle.net/lb838dwf/6/

---

also, 3 divs @ bottom (div1,div4,div2) aren't aligning same grid items above it.

correct. they're not aligning because applied flex: 1 them in #main div. tells them evenly distribute remaining space among themselves.

---

if add max-width: 25% #main div style, keeps same grid, spanning columns doesn't work. tried setting max-width: 25% divs , max-width: none #div3 (the 1 flex:2) doesn't have affect.

what? lost me.

---

i want flexbox behave table order property can tell in css order display elements in grid. possible flexbox?

yes, it's possible.

html

<div id="main">     <div>div 1</div>     <div>div 2</div>     <div>div 3</div>     <div>div 4</div>     <div>div 5</div>     <div>div 6</div>     <div>div 7</div>     <div>div 8</div>     <div>div 9</div>     <div>div 10</div>     <div>div 11</div> </div> 

css

#main {     display: flex;     justify-content: flex-start;     flex-wrap: wrap;     width: 100%; }  #main div {     flex: 0 0 150px; /* don't grow, don't shrink, stay @ 150px */     height: 100px;     margin: 5px;     background-color: #ccc;     border: 1px dashed black; }  #main div:nth-child(2)  { order: -4; background-color: lightblue; } #main div:nth-child(5)  { order: -3; background-color: lightgreen; } #main div:nth-child(8)  { order: -2; background-color: lightyellow; } #main div:nth-child(11) { order: -1; background-color: lightpink; } 

demo: http://jsfiddle.net/lb838dwf/4/

---

spanning multiple columns

as mentioned above, flex property shorthand flex-grow, flex-shrink , flex-basis properties.

flex-grow tells flex items how distribute available space, hence not reliable tool emulating html colspan attribute. (the space available in container , double size of flex item unrelated lengths , not equal.)

however, flex-basis property, sets initial size of flex item, can used make flex items twice wide, 3 times wide, whatever.

in code above, flex items set to: flex: 0 0 150px; third value represents flex-basis. each box set 150px wide.

for flex item occupy 2 columns double value.

since flex cascades divs, need adjust flex-basis targeted items.

#main div:nth-child(11) { flex-basis: calc(300px + 10px); } /* factoring in margin space */ #main div:nth-child(7)  { flex-basis: calc(450px + 20px); } /* factoring in margin space */ 

demo: http://jsfiddle.net/lb838dwf/5/ (expand window effect)