Is It Possible To Mix Rows And Columns With Flexbox?

In other words, is it possible to achieve this? Note: This is the best I could get: http://jsfiddle.net/kzbbb/249/

Solution 1:

You can achieve the layout with a few nested flexboxes. Here's the result of the code below:

html, body, .container {
    height: 100%;
    background-color: white;
}

.container {
    display: flex;
    flex-direction: column;       
    /* flex-wrap: wrap; */
}

.containerdiv {                   
    margin: 10px;
    flex: 1;
    background-color: orange;
}

.container > div:first-child { }

.container > div:nth-child(2) {
    display: flex;
    background-color: white;
}

.container > div:nth-child(2) > div:first-child {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-right: 20px;
}

.container > div:nth-child(2) div {
    flex: 1;
    margin: 0;
}

.container > div:nth-child(2) > div:first-child > div:first-child {
    margin-bottom: 20px;
}

.container > div:last-child { }

<divclass="container"><!-- flex container --><div>Div 1</div><!-- flex item #1 --><div><!-- flex item #2 and nested flex container --><div><!-- flex item and nested flex container --><div>Div 2.1.1</div><!-- flex item --><div>Div 2.1.2</div><!-- flex item --></div><!-- end flex item / container 2.1 --><div>Div 2.2</div><!-- flex item --></div><!-- end flex item / container #2 --><div>Div 3</div><!-- flex item #3 --></div><!-- end .container -->

jsFiddle

Solution 2:

You can do it with nested flexbox, and you don't need to wrap at all.

* {
  box-sizing: border-box;
  border: 1px solid;
}
html,
body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container > div {
  background: #ececec;
  flex: 1;
}
.container > div:nth-of-type(2) {
  display: flex;
}
.container > div:nth-of-type(2) > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.container > div:nth-of-type(2) > div > div {
  flex: 1;
}

<divclass="container"><div>Div 1</div><div><div><div>Div 2.1 A</div><div>Div 2.1 B</div></div><div>Div 2.2</div></div><div>Div 3</div></div>

Solution 3:

In order to achieve what you want just make two changes to your code

First: Those divs that that you want one under the other, make them as child of a div as

<divclass="container"><div>Div 1</div><div><div>Div 2</div><div>Div 3</div></div><div>Div 4</div><div>Div 5</div></div>

Second: In order to create a border for all div write your css as

.containerdiv {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

instead of

.container > div {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

which will apply the styles to all divs instead of divs directly inside the .container class

Have a look at this:

.container {
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
}

.containerdiv {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

.container > div:nth-of-type(1) {
  flex: 11100%;
}

.container > div:nth-of-type(4) {
  flex: 11100%;
}

<divclass="container"><div>Div 1</div><div><div>Div 2</div><div>Div 3</div></div><div>Div 4</div><div>Div 5</div></div>